Vuejs 本地proxytable无效排查方案

末蓝、 2022-04-11 02:55 234阅读 0赞

**坑惨了，因为是看博客学习，有些不全面，而且在百度这问题的时候，要不就不详细，要不就解决了也不说方案，我说下我在本地环境测试时proxytable排查方案**

### 效果 ###

一定要明白代理成功后：浏览器访问的还是http://localhost:8081/mntncar/maintai…  
只是通过内部代理进行了一次转发，这个http://localhost:8081背后可能是http://100.79.81.9:8080

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NjQzNTYy_size_16_color_FFFFFF_t_70]

#### 那还有博主说，代理成没成功，再重启npm run dev就可以看见，不！也不是，我代理成功了，但是没有这种打印 ####

![在这里插入图片描述][webp]

### 成功代码 ###

config下 index.js
    
    module.exports = {
    dev: {
        // Paths
        assetsSubDirectory: 'static',
        assetsPublicPath: '/',
        proxyTable: {
          '/mntncar': {  //将target的值印射为 /mntncar，
            target: 'http://100.79.81.9:8080',
            secure: true,  // 如果是https接口，需要配置这个参数
            changeOrigin: true,  //是否跨域
            pathRewrite: {
              '^/mntncar': '/mntncar'  
            }
          }
        },
        //ps 不直接再8080后跟/mntncar而是写在pathRewrite，是看的这个博主的介绍 --https://segmentfault.com/a/1190000011007043
    
    调用
    getdata:function () {
      this.$http.get("mntncar/..../....belongid=&level=1")
        .then(function (data) {
          console.log(data)
        }, function (err) {
          console.log("111")
        })
    }

### 排查方案 ###

1.  将浏览器请求的url 手动改成代理后的真实地址，测试原url是否畅通（不要以为一定畅通啊，我就是少了这一步，原来一直少了一段路径，加上cmd没打印代理，所以我一直觉得是代理问题）
2.  手动再执行一次npm run dev
3.  再检查下代理配置，很简单 就配这儿 其他不改

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NjQzNTYy_size_16_color_FFFFFF_t_70]: /images/20220411/61a06fbeca1841fe835d8c34a5032334.png
[webp]: /images/20220411/9352a419a9a44ad0b7736b46d1e76112.png