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

朴灿烈づ我的快乐病毒、 2023-02-18 01:57 124阅读 0赞

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

*  1、安装环境
 *  2、配置代理
 *   *  1.在config文件夹下的index.js文件中的proxyTable字段中，作如下处理：
     *  2.在main.js，进行如下配置
     *  3.原理

# 1、安装环境 #

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

cnpm install axios

安装成功截图：  
![在这里插入图片描述][20200615121704513.png]

cnpm install http-proxy-middleware

安装成功截图：  
![在这里插入图片描述][2020061512173030.png]

# 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

[20200615121704513.png]: https://img-blog.csdnimg.cn/20200615121704513.png
[2020061512173030.png]: https://img-blog.csdnimg.cn/2020061512173030.png