CORS问题在VUEJS应用程序上使用私人第三方API

Question

我知道很多有关CORS以及如何解决的文章和QNA，但是当私人第三方API遇到压倒性时，我试图解决这个问题很长时间，但我已经尝试了很多方法，我尝试了很多方法他们中的第三方API服务器在vue.config.js上配置 devserver ，我的第三方API服务器在http：// localhost上运行：8080：我的vue-app在http：// localhost上

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默认

然后，您需要在vue.config.js中更改代理设置为：

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

devserver.proxy docs

这样做的是，它将将所有Axios请求发送到 /api at /api的localhost代理。由于8080上的API服务器没有 /API前缀，因此代理将通过重写路径删除“ /API”。 API服务器将收到正确的请求。浏览器将不再抱怨交叉起源，因为Vue Frontend和后端都具有相同的http：// localhost：3000 Origin。 secure：false是因为您使用的是http而不是https。