vue 跨域配置（过程与问题解决）proxyTable配置

最新推荐文章于 2025-07-15 09:27:25 发布

原创最新推荐文章于 2025-07-15 09:27:25 发布 · 522 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #axios

杂记同时被 2 个专栏收录

15 篇文章

订阅专栏

vue

1 篇文章

订阅专栏

本文详细介绍了如何在Vue项目中配置axios进行ajax请求，并解决了跨域问题。通过在main.js中设置axios的基础URL和请求头，以及在config/index.js中配置proxyTable代理，实现了本地开发环境下的跨域请求。

1.配置
main.js配置

/*ajax请求*/
import axios from 'axios'
axios.defaults.baseURL = 'http://www.projet1.com/';
// var AUTH_TOKEN = 'ss';
// axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

写在new vue 前面

config/index.js中proxyTable配置

proxyTable: {
        '/api': {
          target: 'http://www.projet1.com/',//设置你调用的接口域名和端口号 别忘了加http、https
          changeOrigin: true,//是否跨域
          // secure: true, // 允许https请求
          pathRewrite: {
            '^/api': '/'//这里理解成用‘/api’代替target里面的地址
          }
        }
    },

这里坑最大，如果还是报错，先要理解pathRewrite的含义：

用代理, 首先你得有一个标识, 告诉他你这个连接要用代理. 不然的话, 可能你的 html, css, js这些静态资源都跑去代理. 所以我们只要接口用代理, 静态文件用本地.’/api’: {}, 就是告诉node, 我接口只要是’/api’开头的才用代理.所以你的接口就要这么写 /api/xx/xx. 最后代理的路径就是 http://xxx.xx.com/api/xx/xx.
可是不对啊, 我正确的接口路径里面没有/api啊. 所以就需要 pathRewrite,用’’^/api’’:’’, 把’/api’去掉, 这样既能有正确标识, 又能在请求接口的时候去掉api

然后你觉得配置都正确了，还是不对，可以换个浏览器后者重启电脑试试，反正我最后是换了浏览器就可以了。。（坑啊！！！）