如何处理 OPTIONS 请求中的自定义 headers

Question

我想得到的是通过请求向 API 发送自定义 header。我将我的 React 应用程序作为客户端，将 Express 应用程序作为服务。在我的服务中，我设置为：

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));

但是在本地测试时，我没有得到响应header中的Access-Control-Allow-Headers: *。所以，我连这段代码都没有部署到服务器。

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

提前致谢。

Answer 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!'})
})

如何处理 OPTIONS 请求中的自定义 headers

How to handle custom headers in OPTIONS request

cors

express

preflight

reactjs

axios