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

Question

所以，我试图通过代理我的请求来绕过服务器上的 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 设置。

谢谢！

标签： javascripthttpwebpackcorsaxios

Answer 1

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

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