Express、React和Webpack的CORS预检问题：GET请求无法传递请求头

我之前在类似的环境里也碰到过一模一样的问题，结合你的配置和环境，咱们从这几个关键点排查：

1. 先确认客户端请求的写法是否正确 #

很多时候问题出在请求代码上，尤其是GET请求的headers配置。比如用fetch的话，要确保headers放在请求配置对象里，而且GET请求不要添加不必要的Content-Type头（比如application/json），这会触发浏览器发送OPTIONS预请求，若服务器处理不当就会导致headers丢失。

举个正确的示例：

// 客户端GET请求代码
fetch('/api/your-target-endpoint', {
  method: 'GET',
  headers: {
    'value1': 'your-custom-value-1',
    'value2': 'your-custom-value-2',
    'value3': 'your-custom-value-3'
    // 注意：GET请求不需要Content-Type，除非服务器明确要求
  }
})
.then(response => response.json())
.catch(err => console.error('请求错误:', err));

2. 检查Webpack Dev Server的代理配置 #

如果你的React项目运行在Webpack Dev Server的端口（比如localhost:3000），而后端服务在另一个端口（比如localhost:8080），必须配置proxy来转发请求，否则跨域场景下浏览器会拦截自定义headers。

在webpack.config.js里添加如下代理配置：

module.exports = {
  // ...其他Webpack配置
  devServer: {
    proxy: {
      '/api': { // 匹配需要转发的请求路径前缀
        target: 'http://localhost:8080', // 你的后端服务地址
        changeOrigin: true, // 必须设置为true，否则服务器会认为请求来自Webpack Dev Server的端口
        secure: false, // 本地测试时关闭HTTPS验证
        // 确保自定义headers能被正确转发
        onProxyReq: (proxyReq, req, res) => {
          Object.keys(req.headers).forEach(header => {
            proxyReq.setHeader(header, req.headers[header]);
          });
        }
      }
    }
  }
};

3. 确保服务器正确处理OPTIONS预请求 #

当你发送带自定义headers的GET请求时，浏览器会先发送一个OPTIONS预请求，确认服务器允许这些headers。你的现有配置虽然设置了headers，但可能没有明确响应OPTIONS请求，导致浏览器拒绝发送后续的GET请求。

修改服务器代码，专门处理OPTIONS请求：

// 先处理OPTIONS预请求
app.options('*', (req, res) => {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Methods", "GET,HEAD,PUT,POST,DELETE,OPTIONS");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, value1, value2, value3");
  res.sendStatus(204); // 返回204状态码（无内容），告诉浏览器预请求通过
});

// 再处理其他请求的CORS头
app.use((req, res, next) => {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Methods", "GET,HEAD,PUT,POST,DELETE,OPTIONS");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, value1, value2, value3");
  next();
});

4. 清除浏览器缓存或使用无痕模式测试 #

浏览器有时候会缓存之前的CORS配置，导致新的headers无法生效。试试清除浏览器缓存，或者直接打开无痕窗口重新测试请求。

5. （可选）升级Node版本（非必须） #

你使用的Node 9.9版本比较老旧，虽然理论上不会直接导致这个问题，但新版本的Node.js修复了很多HTTP模块的小bug，如果前面的方法都无效，可以尝试升级到更稳定的版本（比如Node 14+）再测试。

内容的提问来源于stack exchange，提问作者Tsar Bomba