使用Vue从localhost调用端点时发生Cors错误

Question

我正在用Vue创建一个简单的应用程序，并用axios 调用一个端点

axios.post(url, {
email: this.email,
})
.then((response) => {
console.log(response);
})
.catch((error) => {
console.log(error);
});

我得到错误

来源'http://localhost:8080'已被CORS策略阻止：对飞行前请求的响应未通过访问控制检查：它没有HTTP正常状态。

问题不在服务器级别，我从Postman或直接使用CURL进行了测试，它不会产生错误。

---

解决方案：

感谢Shrinivas Bendkhale的评论。我设法解决了这个问题。

起初它不起作用，所以有必要添加"；logLevel"；以及"；路径重写"；选项。

• logLevel：它允许在终端中查看代理的工作方式
• pathRewrite：将路径的其余部分添加到代理

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

所以我的电话如下

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

Answer 1

在vue.config.js文件中添加以下行：

// vue.config.js
module.exports = {
// options...
devServer: {
proxy: 'https://mywebsite/',
}
}