标签：VUE 跨域 访问 JSONP document jsonpAPI

1. 概述

1.1 说明

　　在vue项目中，存在直接前端访问某一服务/硬件等情况，一般使用axios/fetch的get方法去访问（服务端允许跨域访问）获取拿到对应信息；但在访问硬件(如身份证读取器)时，本地服务访问与项目服务跨域时，接口访问还是存在跨域问题，此时使用JSONP访问来解决跨域问题；

2.1 JSONP代码

    jsonpAPI(url) {
      // eslint-disable-next-line
      return new Promise((resolve, reject) => {
        window.jsonCallBack = (result) => {
          resolve(result)
        }
        const JSONP = document.createElement('script')
        JSONP.type = 'text/javascript'
        JSONP.src = url
        document.getElementsByTagName('head')[0].appendChild(JSONP)
        setTimeout(() => {
          document.getElementsByTagName('head')[0].removeChild(JSONP)
        }, 500)
      })
    },

2.2 VUE调用

const res = await this.jsonpAPI('http://localhost:8989/api/ReadMsg')

2.3 代码功能

封装jsonp访问方法：jsonpAPI

vue调用jsonp访问：this.jsonpAPI

标签：VUE,跨域,访问,JSONP,document,jsonpAPI
来源： https://www.cnblogs.com/ajuan/p/16646354.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。