vue javascript 跨域

vue-jsonp 解决跨域

注：此方法只支持GET请求,不支持POST

npm install vue-jsonp --save

//在main.js中
import VueJsonp from 'vue-jsonp'
Vue.use(VueJsonp)

//在需要的页面
this.$jsonp('url', {"参数，根据自己需求"}
	).then(res => {
        console.log(res)
    })
	.catch(err => {
        console.log(err)
    })

如果出现 Cross-Origin Read Blocking (CORB) blocked cross-origin response https://xxxxxxxxx with MIME type application/javascript. See https://www.chromestatus.com/feature/5629709824032768 for more details. 这种提示，实际上是禁止跨域请求是浏览器本身的一种安全策略

跨域资源共享（CORS）机制，是为了浏览器能更为安全的处理跨域请求，使其不受同源策略的限制。简单来说就是把需要允许跨域的源写入response头里的Access-Control-Allow-Origin。对应的源就可以实现跨域资源共享了。

我们可以使用代理来解决这个问题

// 在vue.config.js中写入

module.exports = {
  devServer: {
    port: "端口号",
    proxy: {
      '/api': {
        target: '这里写你要请求的接口的固定地址',
        ws: true,
        pathRewrite: {
          '^/api': '/'  //这边用的是api  可以随便写  注意：要在请求的接口前面加上/api
        }
      }
    }
  }
}

// 例如：
this.$jsonp('/api/url', {})
	.then(res => {
        console.log(res)
    })
	.catch(err => {
        console.log(err)
    })