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

Posted 2023-03-04

【中文标题】为啥 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 设置。

谢谢！

【参考方案1】：

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

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