vue2解决跨域的方法详解

Vue2解决跨域的方法有以下几种：

1. 通过配置代理服务器

在vue.config.js文件中配置devServer属性，将proxy选项设置为代理服务器的地址。例如：

module.exports = {
  devServer: {
    proxy: 'http://localhost:3000'
  }
}

这样，当我们在前端请求接口时，会先将请求发送到代理服务器，代理服务器再将请求转发到真正的后端接口地址。

2. 在后端设置允许跨域

在后端代码中设置Access-Control-Allow-Origin字段，允许前端跨域请求。例如：

app.use((req, res, next) => {
  res.setHeader('Access-Control-Allow-Origin', '*');
  next();
});

3. 使用JSONP

JSONP是一种跨域请求的方式，它通过动态创建script标签，将请求发送到后端，并将返回的结果作为参数传递给回调函数。在Vue中，我们可以使用vue-jsonp插件来实现JSONP请求。例如：

import Vue from 'vue';
import VueJsonp from 'vue-jsonp';

Vue.use(VueJsonp);

Vue.jsonp('http://localhost:3000/api/data', {
  callbackName: 'getData',
}).then((res) => {
  console.log(res);
});

以上是Vue2解决跨域的几种方法，根据实际情况选择合适的方法进行跨域处理。