为什么 webpack 代理不起作用（Access-Control-Allow-Origin 错误）？答案

【问题标题】：Why does webpack proxy do not work (Access-Control-Allow-Origin error)?为什么 webpack 代理不起作用（Access-Control-Allow-Origin 错误）？
【发布时间】：2019-10-13 04:15:40
【问题描述】：

所以，我试图通过代理我的请求来绕过服务器上的 CORS。我正在使用 webpack 和 axios。所以，这里是 webpack 开发服务器选项：

devServer: {
            contentBase: './build/',
            historyApiFallback: true,
            hot: true,
            quiet: true,
            open: false,
            port,
            noInfo: false,
            clientLogLevel: 'error',
            proxy: {
                '/api/**': {
                    target: 'http://mydev.com',
                    changeOrigin: true,
                    secure: false
                }
            }
        }

和 axios：

const axiosInstance = axios.create({
    baseURL: 'http://mydev.com',
    timeout: 30000,
    headers: {
        'Content-Type': 'application/json',
        'X-AUTH-TOKEN':
            'my-token
    },
    data: {}
});

但我的来源仍然是 localhost 和 option 请求没有通过。因此我有这个错误。

澄清一下：我想使用 JSON 内容从 localhost 向 mydev.com 发出请求并绕过 CORS 设置。

谢谢！

【问题讨论】：

标签： javascript http webpack cors axios

【解决方案1】：

Webpack 的代理选项实际上创建了一个小型反向代理服务器，它连接到您的目标端点。在这种情况下，您的应用（axios 实例）应该连接到您的代理：

const axiosInstance = axios.create({
    baseURL: 'localhost:3000/api' // your local server here
    ...
});

【讨论】：