授权标头在获取中不起作用 - React Native

Posted 2023-02-22

【中文标题】授权标头在获取中不起作用 - React Native

【英文标题】：Authorization header not working in fetch - React Native

【发布时间】：2018-08-26 15:00:33

【问题描述】：

我正在向我的计算机 (192.168.1.132) 上的 API 发出请求，并通过我的手机（在同一网络中）做出本机反应：

fetch('http://192.168.1.132:8000/test', 
  method: 'GET',
  headers:  'Authorization': 'Bearer 4uFPmkP5326DXcRuHDKjRRrmhdeIBJ',
  credentials: 'same-origin'
  )
  .then((response) => response.json())
  .then((responseJson) => 
    console.log('RESPONSE: ' + JSON.stringify(responseJson))
  )

但是我正在嗅探请求并且它没有授权标头（我放置的任何其他标头都会出现，但不会出现授权）。在 Xcode 中，我启用了“AllowArbitraryLoads”。所以我的 API 返回 401（未授权），因为显然没有授权标头。为什么它没有包含在我的请求中？

【问题讨论】：

试试这个using an authorization header with fetch in react native

看起来不错，应该可以。不过，我个人从未使用过 credentials 属性。

尝试改用credentials: 'include'。除非您的前端 javascript 也从源 http://192.168.1.132:8000 运行，否则您的代码会发出跨域请求。但是对于credentials: 'same-origin' ，你已经告诉浏览器只在同源请求中包含凭据，而不是跨域请求。 Authorization 标头（用于 HTTP 身份验证）是一种凭据 fetch.spec.whatwg.org/#credentials，因此浏览器会忽略它，除非（通过使用 credentials: 'include'）明确表明您始终希望包含凭据——即使对于跨域请求也是如此

顺便说一句，您需要确保http://192.168.1.132:8000/test 端点允许未经身份验证的 OPTIONS 请求——也就是说，没有 Authorization 标头。因为包含 Authorization 标头会触发您的浏览器首先自动发送 CORS 预检 OPTIONS 请求developer.mozilla.org/en-US/docs/Web/HTTP/…，但浏览器始终会忽略该 OPTIONS 请求中的所有凭据。因此，如果 http://192.168.1.132:8000/test 端点在 OPTIONS 请求中也需要 Authorization 标头，则预检将失败。

并且要清楚，仅仅因为您的前端 JavaScript 代码也在 192.168.1.132 服务器上运行，不会使请求同源。只有当你的前端代码的服务器端口号与你发送请求的服务器的端口号相同时，它才会是同源的。因此，除非您的前端代码也在服务器的 8000 端口上运行，否则您的代码发出的请求是跨域请求。

【参考方案1】：

您需要在您的 url 上添加一个斜杠以附加标题。正如 cmets 中所指出的，让凭证说“包含”。如果您的 API 在飞行前附加了 CSRF 令牌，那么它也会包含该 cookie。

【讨论】：

我只需要尾部的斜线！这太疯狂了！我花了两个多小时试图弄清楚这一点。谢谢！！！！

为什么需要尾部斜杠？有什么资源可以阅读更多相关信息吗？

我爱你，我花了几天、几周的时间试图解决这个问题。

我可以证明这个斜线的力量。有用！注意，我只在 React Native ios 上看到了这个问题。 android 在没有斜线的情况下工作。

【参考方案2】：

首先，我只是在我的 Node Express API 中使用以下内容：

app.use(function(req, res, next) 
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, Authentication");
  next();
);

react app 不能正常工作，但 Insomnia 直接请求它可以正常工作，然后我需要添加以下内容：

const cors = require('cors');
app.options('*', cors())