记Vue-proxyTable跨域代理配置失效问题

上周周四和周五开发中遇到一个文件批量上传的需求，单纯的将文件上传到服务器、然后加上查询和删除功能。之前做过类似功能，但是没回去看代码，结果卡了一天。Element一次选择多个文件上传只会调用一次且是第一个文件上传后调用一次 on-success 函数，踩了坑耽误了开发进度。计划周末去加班的，但是因为这几天疫情严重，没有48h核酸检测不让进楼，没办法只能在家里新建一个demo研究一下，结果一开始就卡在了代理配置上。

代理的配置

我用的是vue-cli + webpack + Element 的方式，配置在 config/index.js,代理配置如下：

proxyTable: {
    proxy: {
        '/': {
            target: 'http://localhost:8081/',
            changeOrigin: true,
            pathRewrite: {
                '^/': ''
            }
        }
    }
}

后台地址是：localhost:8081，浏览器直接访问后台地址能正常返回数据。但是通过axios访问却一直报404错误。

sendAction() {
    this.$axios.get('/name').then((res) => {
        console.log('res: ', res)
    })
}

各种尝试

周天花了一天研究这个问题，没找到解决方案，记得上次一个项目里也是遇到同样的问题，花了好几个晚上的时间都没解决，噩梦又来了，内心有点退缩了。

看了上次的项目配置，再加上百度、Bing、谷歌搜了个遍，找到几种最常见的解决方案：

• 浏览器直接访问后端接口，看能否正常返回；
• 配置完跨域代理之后，一定要重启项目，npm run ddev ;
• 确保配置没问题，并且请求中的URL在被代理正则替换之后是浏览器能正常访问返回数据的正确地址；
• 代理插件可能有缓存，删除 node_modules 之后，重新 npm install ， npm run dev ；
• 更换前端项目端口然后重启；
• 检查是否搭了梯子，代理可能会受到影响；
• 为 axios 配置 baseUrl …

大致找到以上常见的解决方案，除了配置 baseUrl，其他的我都尝试了，并且100%保证配置没问题，可是就是请求不过去。甚至想查一下怎么看代理以后的地址长什么样，可是没找到相关的方法。

最终原因

今天晚上回来从10：50开始研究，去GitHub比对了和上次的配置差在哪里，一行一行比对，结果发现配置里的 json 多了一层 proxy！这个配置是我从网上博客里复制过来的，害死人了。

当前配置：

proxyTable: {
    proxy: {
        '/': {
            target: 'http://localhost:9002/',
            changeOrigin: true,
            pathRewrite: {
                '^/': ''
            }
        }
    }
}

正确配置：

proxyTable: {
    '/': {
        target: 'http://localhost:9002/',
        changeOrigin: true,
        pathRewrite: {
            '^/': ''
        }
    }
}

去掉proxy一层，重启前端项目，然后清除缓存，刷新页面，访问，成功返回数据。