Vue 中使用jsonp来解决跨域问题

Vue 中要利用jsonp来解决跨域问题，可以引入vue-jsonp

安装

npm install vue-jsonp

引入

import { VueJsonp } from 'vue-jsonp'
 
// Vue Plugin.
Vue.use(VueJsonp)

这里要特别注意一点，网上很多文章都写着 import VueJsonp from 'vue-jsonp',实际你使用过程中，会报错 undefined,其实我们看源码也可以得知导入方式

使用

具体使用我们可以参考

• Vue-jsonp

这里需要特别注意一点，使用文档上也没有说明，如果我们回调的方法名不指定的话，默认是jsonp_,如果服务器返回不一致的话，我们可以指定 callbackName
具体代码示例如下:

this.$jsonp(
        `http://localhost:8081',
        {
          callbackQuery: 'jsonpcallback',
          //指定回调的查询字符串的名称（默认callback）,后端可能自定义，比如当前案例约定的是jsonpcallback
          callbackName: 'jsonpFunc' //回调函数方法名称
       }
      ).then(data => {
        console.log(data);
      });

2021-6-10更新

jsonp方法在并发情况下发生报错

Uncaught ReferenceError: jsonp_ is not defined

造成以上错误的原因是使用了相同的jsonpCallback, jsonpCallback请求完成后会删除回调方法，所以当两个jsonp请求使用相同的jsonpCallback时就会造成冲突。

所以解决起来很容易，根据不同的请求设置不通的callbackName 即可

this.$jsonp(
        `http://localhost:8081',
        {
          callbackName: 'jsonpFunc'  + '' "  // 根据不同的请求设置不同标识
       }
      ).then(data => {
        console.log(data);
      });