带有 axios 的 CORS答案

【问题标题】：CORS with axios带有 axios 的 CORS
【发布时间】：2020-09-24 06:54:51
【问题描述】：

我正在尝试使用 axios 和 vue.js 向有效服务器发送 get 请求，但我不断收到 Access to XMLHttpRequest at 'http://37.152.185.50:8080/hotels/tblisi' from origin 'http://localhost:63342' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. 我尝试设置 Content-Type 标头但没有运气。我在另一个项目中也遇到了与 axios 和 vue.js 相同的问题，显然对其他人来说效果很好。

vm = new Vue({
    el: '#main-container',
    data: {
        city: 'istanbul',
        hotels: []
    },
    methods: {
        setCity: function (city) {
            this.city = city;
            axios({
                method: 'get',
                data: {},
                url: 'http://37.152.185.50:8080/hotels/' + this.city,
                headers: {
                    'content-type':  'application/x-www-form-urlencoded',
                }
            });
        }
    }
});

我也无权访问服务器来更改响应标头。

【问题讨论】：

标签： vue.js axios

【解决方案1】：

“Access-Control-Allow-Origin”是响应头的类型，必须由服务器设置。

因此您需要更改服务器的 CORS 策略以允许您的来源：http://localhost:63342。

【讨论】：

不幸的是我做不到。有什么解决办法吗？
如果只是为了开发，可以使用工具将 headers 注入到响应中。像 Requestly（Chrome 扩展程序）或 Charles（操作系统级别的代理）之类的东西。

【解决方案2】：

您可以使用代理服务器来避免 CORS 错误。在 vue.config.js 中编写此代码。

module.exports = {
    devServer: {
        proxy: {
            '/': {
                target: 'http://localhost:8080',
                changeOrigin: true,
                pathRewrite: {
                    '^/': ''
                }
            }
        }
    }
}

【讨论】：