Question

我正在调用与此类似的提取请求。

fetch('https://api-endpoint.com/api',
        {
            method: "POST",
            headers: new Headers({
                'custom-header': 'custom header value'
            })
        }
     )
    .then(res=>{
        /* code */
    })
    .catch(err=>{
        /* code */
    })

但是，似乎标头未发送到服务器。该服务器运行在Node.js上，我正在尝试使用React-Native来访问它。

我已在服务器上允许"access-control-allow-origin": "*"，但无济于事。

我还可以到达服务器上不需要任何标头的其他端点。

最后，我将new Headers()和对象都设置为标头。

我到底缺少什么来允许发送标题？有没有办法查看我的react-native请求的确切情况？

在邮递员中很好用。

编辑：

我正在服务器中使用cors中间件。

app.use(cors())

appConfig.init(app);

Answer 1

您可以在使用路线之前添加这些行并尝试吗？

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");

  res.header("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");

  res.header(
    "Access-Control-Allow-Headers",
    "Origin, X-Requested-With, Content-Type, Accept, Authorization, custom-header"
  );

  res.header("Access-Control-Expose-Headers", "custom-header");

  next();
});

如果您使用的是Express Cors中间件，则可以添加allowedHeaders和暴露的Headers选项。

https://github.com/expressjs/cors#configuration-options

请注意，如果这些配置替换了默认标头，则可能需要将默认标头添加到选项中。

app.use(
  cors({
    exposedHeaders: ["custom-header"],
    allowedHeaders: ["custom-header"]
  })
);

最后，您最好像这样使用提取API发送标头：

fetch('https://api-endpoint.com/api',
  {
    method: "POST",
    headers: {
      "custom-header": "custom header value"
    }
  }
)
  .then(res => {
    /* code */
  })
  .catch(err => {
    /* code */
  })

https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

为什么我的Fetch请求没有在React-Native中发送自定义标头？

1 个答案: