vue跨域使用jsonp解决方案

使用api开发中跨域是很常见的事，解决跨域的最好方案还是由后端来解决比较方便，但是有的时候使用的是第三方的api，对方不可能为你一个人需求去改后端。

常见的跨域解决方案：

• 后端允许所有或者允许指定域
• 前后端布置在一个域下
• 使用jsonp

前两种不用说了，我们就说下使用第三者只有jsonp方案的实施步骤。

网上好多关于jsonp的解决方案，我这里是开发小程序，使用了一个叫uniapp的库去生编译出小程序、h5等，小程序没什么问题，关键是h5牵涉到了域就会出现跨域问题，对方也只提供给了jsonp的一种方案，正常原生js里写jsonp没啥问题，要集成到uniapp中该如何入手呢。

这种问题肯定有很多大神遇到过肯定也有解决方案，果然，官方插件库发现了这个vue-jsonp，下面给出来使用示例。

vue请求数据的时候，会遇到跨域问题，服务器为了保证信息的安全，对跨域请求进行拦截，因此，为了解决vue跨域请求问题，需要使用jsonp。

安装jsonp

npm install --save vue-jsonp

引入

安装完成之后在main.js中引入jsonp

import  VueJsonp  from  'vue-jsonp'
Vue.use(VueJsonp)

使用

引入jsonp之后，就可以使用jsonp跨域请求数据。
注意：并不是所有的网站都可以使用jsonp请求后台数据，需要后台支持jsonp。

var param = {
        header: {
          "content-type": "application/xml" // 豆瓣一定不能是json
        }
      };
      this.$jsonp('https://douban.uieee.com/v2/movie/in_theaters',param).then(
        (json) => {
          console.log(json)
        }).catch(err => {
          console.log(err)
        })

测试下豆瓣，可以了吧。