如何处理 OPTIONS 请求中的自定义标头答案

【问题标题】：How to handle custom headers in OPTIONS request如何处理 OPTIONS 请求中的自定义标头
【发布时间】：2020-05-15 16:32:02
【问题描述】：

我想要的是通过向 API 的请求发送自定义标头。我有我的反应应用程序作为客户端和一个快速应用程序作为服务。在我的服务中，我设置了这个：

app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  res.header(
    'Access-Control-Allow-Headers',
    'Origin, X-Requested-With, Content-Type, Accept, Authorization, my-custom-header',
  );
  res.header('Access-Control-Allow-Methods', 'GET, PUT, POST, DELETE, PATCH');
  next();
});

在我的 react 应用程序中，我使用 axios 来使用这样的服务：

const callEndpoint = (dataToPost) =>
 axios.post(
   {
     `${my-url}/{my-endpoint}`,
     { dataToPost },
     { headers: { 'my-custom-header': 'anyStringValue' },
   }
 ).then((res) => handleRes(res))
  .catch((err) => handleErr(err));

但是，每次我调用 callEndpoint(dataToPost) 时，我都会在预检时从 CORS 收到此错误：

Access to XMLHttpRequest at 'http://my-url/my-endpoint' from origin 'http://localhost:PORT' has been blocked by CORS policy: Request header field my-custom-header is not allowed by Access-Control-Allow-Headers in preflight response.

我认为在服务配置中添加my-custom-header 可以让我继续，但它没有。我也尝试设置'Access-Control-Allow-Headers': '*'，但也没有用。

我也尝试过像这样使用cors 包：

const corsOptions = function (req, callback) {
  callback(null, { allowedHeaders: '*' })
}
app.use(cors(corsOptions));

但是在本地测试时，我没有在响应标头中得到Access-Control-Allow-Headers: *。所以，我什至没有将这段代码部署到服务器上。

我应该怎么做才能让我的自定义标头在预检中通过 CORS？

提前致谢。

【问题讨论】：

你可以使用 cors 插件npmjs.com/package/cors。它将为您处理 cors 请求
@elvis_ferns 我也使用了cors 包，并设置了allowedHeaders: '*'。但是得到了同样的结果。让我更新我的问题，以便您了解我是如何设置的。
@elvis_ferns 你去吧。
不需要特殊配置。它将从请求标头中获取标头

标签： reactjs express cors axios preflight

【解决方案1】：

参考下文

//if you want to add cors app level  
app.options('*', cors()) // include before other routes

//if you want to add cors single rout level
app.options('/products/:id', cors())
app.del('/products/:id', cors(), function (req, res, next) {
  res.json({msg: 'This is CORS-enabled for all origins!'})
})

【讨论】：

不可避免，用于添加到所有或特定路线
@elvis_ferns 我改错了