Reactjs 如何处理选项请求中的自定义标题

我试图得到的是通过请求向API发送自定义头。我的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));

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

但是，每次我调用

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.

我原以为在服务配置中添加

我的自定义标题

可以让我继续，但事实并非如此。我还尝试设置

“访问控制-允许-标题”：“*”

，但也不起作用

我还尝试使用

cors

包，如下所示：

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

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

但是在本地测试时，我没有在响应头中获得

访问控制允许头：

。因此，我甚至没有将这段代码部署到服务器上

我应该怎么做才能让我的自定义标头在飞行前通过CORS

---

提前感谢。

请参阅下文

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

---

请参阅下文

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

---

您可以使用cors插件。它将处理cors的请求you@elvis_ferns我还使用了

cors

包，并设置

allowedHeaders:'*'

。但是得到了同样的结果。让我更新我的问题，这样你们就可以看到我是如何设置它的。@elvis_ferns，好了。不需要特殊配置。它将从请求标头中获取标头。您可以使用cors插件。它将处理cors的请求you@elvis_ferns我还使用了

cors

包，并设置

allowedHeaders:'*'

。但是得到了同样的结果。让我更新我的问题，这样你们就可以看到我是如何设置它的。@elvis_ferns，好了。不需要特殊配置。它将从请求headersits中获取头，而不是避免，它用于添加到所有或特定routes@elvis_ferns我改变了字体，不是为了避免，而是为了增加所有或特定的内容routes@elvis_ferns我改了打字错误