Vue本地调用接口遭遇CORS错误的排查与解决

最近在用Vue开发一个小应用，用Axios调用后端接口时碰到了棘手的CORS问题，报错信息如下：

来自源'http://localhost:8080'的请求已被CORS策略阻止：对预检请求的响应未通过访问控制检查：它不具有HTTP ok状态。

我先排查了服务器端，用Postman和CURL直接调用接口都完全正常，说明问题不在后端，得从前端配置入手。

后来参考了Shrinivas Bendkhale的建议，我调整了Vue的开发服务器代理配置，终于搞定了这个问题。一开始只加基础代理没生效，后来发现必须加上logLevel和pathRewrite这两个关键配置项：

• logLevel: 用来在终端查看代理的运行状态，方便确认代理是否正确转发请求
• pathRewrite: 将请求路径中匹配的前缀替换掉，确保转发后的路径符合后端接口的路径规则

最终生效的vue.config.js配置代码如下：

// vue.config.js
module.exports = {
 devServer: {
  proxy: {
   '^/rp': {
    target: process.env.API_OLD_SERVER,
    secure: false,
    logLevel: 'debug',
    pathRewrite: { '^/rp': '/' }
   },
  },
 }
}

同时，我也修改了Axios的调用代码，把原来的完整接口URL替换成以代理前缀开头的路径：

axios.post('/rp/full-path', { usermail: this.email, })
 .then((response) => { console.log(response.data); })
 .catch((error) => { console.log(error); });

做完这些调整后，预检请求顺利通过，接口也能正常调用了。

内容的提问来源于stack exchange，提问作者normeno