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

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 和exposedHeaders 选项。

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

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

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

最后你最好使用这样的 fetch 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