小伙伴们，基本都遇到过处理跨域请求，axios 跨域请求设置其实很简单，但是里面有坑！敲黑板了。

说下我在本地环境测试时 proxyTable 排查方案：

注意：

一定要明白代理设置成功后：访问的接口地址依然还是：http://localhost:8080/apis/helloweb/f01...；只是通过内部代理进行了一次转发（了解NG的应该很容易理解）这个  http://localhost:8080  背后可能是 http://192.168.0.0:18000 或其它的地址。

所以这儿一定要注意，代理成没成功，不能看浏览器请求的地址是不是 localhost 变成了你设置的新地址。

下面看配置代码

路径：打开 config 文件夹中的 index.js 文件

module.exports = {
 dev: {
    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/apis': {
        target:'http://helloweb.wang',//请求域名
        //secure: false, // 如果是https接口，需要配置这个参数
        changeOrigin:true,//如果是跨域访问，需要配置这个参数
        pathRewrite:{
          '^/apis': '/'
        }
      }
    },
  }
}

 页面调用：

const httpHandler = axios.create({
    headers: { "Content-Type": "application/json;charset=utf-8" }, //即将被发送的自定义请求头
    withCredentials: true //表示跨域请求时是否需要使用凭证
});
let url = "apis/osg-p0002/member/c10/f04";
httpHandler
    .post(url)
    .then(result => {
        console.log(result);
        this.data = result;
     })
     .catch(error => {
        console.error(error);
     });

排查方案

1. 更改配置文件了，先重启！！！
   

2. 将浏览器请求的 url 手动改成代理后的真实地址，测试原 url 是否畅通（不要以为一定畅通啊，我就是少了这一步，原来一直少了一段路径，加上cmd没打印代理，所以我一直觉得是代理问题）

3. 手动再执行一次npm run dev

4. 再检查下代理配置，很简单 就配这儿 其他不改

5. 电脑开着全局代理翻墙(有可能是网页，如chrome，火狐浏览器,也有可能shawdowsocks（开启了全局模式）,将其退出)

6. 删掉node_modules 目录，重新 npm install 安装

7. proxyTable的修改会无效，这时候可以尝试修改启动项目的端口，就在proxyTable属性配置的下面几行有个port: 8080，改成其他,例如8081，就会有效，然后再改回来就好(最好再执行下 npm run dev)。

参考文献：Vuejs 本地proxytable无效排查方案

原文链接：HelloWeb前端网 » vue-cli中proxyTable配置无效问题解决方法 » 感谢您的浏览，希望能有所帮助。

欢迎您加入“Helloweb” 学习交流群： 196291215 共同交流并结识同行，在这里说出您的收获与感想或有什么不同的观点，我们期待您的留言，分享，让我们一起进步！