vue-cli中proxyTable配置无效的解决方法

2023-05-04,,

今天就跟大家聊聊有关vue-cliproxyTable配置无效的解决方法,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。

1.打开 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)。

看完上述内容,你们对vue-cli中proxyTable配置无效的解决方法有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注本站行业资讯频道,感谢大家的支持。

《vue-cli中proxyTable配置无效的解决方法.doc》

下载本文的Word格式文档,以方便收藏与打印。