vue前端解决跨域问题（axios）

1、安装环境

需要安装 axios,http-proxy-middleware 等
这里我用的是 cnpm 比较快
配置链接：https://www.jianshu.com/p/79d4430e0a9d

 cnpm install axios

安装成功截图：

cnpm install http-proxy-middleware

安装成功截图：

2、配置代理

1.在config文件夹下的index.js文件中的proxyTable字段中，作如下处理：

  dev: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/api': {
        target:'http://47.115.12.243', // 你请求的第三方接口
        changeOrigin:true, // 在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
        pathRewrite:{  // 路径重写，
          '^/api': ''  // 替换target中的请求地址，也就是说以后你在请求 http://47.115.12.243 这个地址的时候直接写成/api即可。
        }
      }

    },

2.在main.js，进行如下配置

// axios - 请求接口
import axios from 'axios';
Vue.prototype.axios = axios;
axios.defaults.baseURL = '/api'  //关键代码

3.原理

原理：

因为我们给url加上了前缀/api，我们访问/xxx就当于访问了：localhost:8080/api/xxx（其中localhost:8080是默认的IP和端口）。

在index.js中的proxyTable中拦截了/api,并把/api及其前面的所有替换成了target中的内容，因此实际访问Url是http://47.115.12.243/xxx

至此，纯前端配置代理解决axios跨域得到解决。

参考链接：https://blog.csdn.net/wh_xmy/article/details/87705840?utm_medium=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.nonecase&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.nonecase