VUEJS应用程序上私有第三方api的CORS问题

Question

我知道很多关于CORS以及如何解决它的文章和QnAs，但是当涉及到私人第三方api时，我试图解决这个问题已经有一段时间了，没有工作，我尝试了很多方法，其中之一是配置devServer代理在vue.config.js上，我的第三方API服务器运行在http://localhost:8080上，我的vue-app运行在http://localhost:3000

axios
.post("patient/request/" + this.$store.state.token, {
patients: [
{
index: "1",
patientIdentifier: {
domain: "mdat",
name: "pat_id",
id: this.id,
type: "localIdentifier",
},
},
],
})
.then((response) => {
if (response.data.patients.length === 0) {
this.showAlert(
this.$t("requestPSNbyID.not_found"),
"error"
);
} else {
this.dataLoad = response.data.patients[0].patient;
console.log(this.dataLoad);
this.rpsn = true;
}
this.$store.dispatch("getToken", this.payload);
//state.mdatID = response.data.patients[0].targetId;
})
.catch((error) => {
this.errorHandler(error);
});

module.exports = {
devServer: {
proxy: "http://localhost:8080",
}
}

但是我得到错误

Access to XMLHttpRequest at 'http://localhost:8080/ths/rest/sessions' from origin 'http://localhost:3000' has been blocked by CORS policy

还有其他解决方案吗?

Answer 1

我认为你需要做以下事情。设置axios的基础url为http://localhost:3000/api。

axios.defaults.baseURL = 'http://localhost:3000/api';

参见:Axios config defaults

然后你需要改变你的vue.config.js中的代理设置为:

proxy: {
'/api': {
target: 'http://localhost:8080',
pathRewrite: { '^/api': '' },
secure: false,
changeOrigin: true,
},
},

看到:devServer。代理文档

它的作用是将所有Axios请求发送到/api的localhost代理。由于8080上的api服务器没有/api前缀，代理将通过重写路径来删除'/api'。api服务器将接收到正确的请求。浏览器将不再抱怨交叉起源，因为Vue前端和后端都有相同的http://localhost:3000起源。secure: false是必需的，因为您使用的是http而不是https。