react + redux - 401 - 未经授权 - 请求标头中缺少标头答案

【问题标题】：react + redux - 401 - unauthorized - missing headers in Request Headersreact + redux - 401 - 未经授权 - 请求标头中缺少标头
【发布时间】：2017-05-17 13:42:58
【问题描述】：

return fetch(`{SERVICE API URL}`, {
  method: 'GET',        
  headers: {
    'userName': "username",
    'password': "password",
    'content-type': 'application/json'
  }
})
.then(response => response.json())
.then(json => dispatch(receivePosts(reddit, json)))

我正在尝试获取带有授权标头的服务 API 数据，但收到 401 - Unauthorized 错误并且响应是Missing Request Headers。

尝试发送带有正文的授权内容 - 得到相同的错误 401 - 未经授权的错误。

已编辑：

 headers: {
        'userName': "xyz",
        'sessionToken': "xyz................."
      }

当我使用 Postman 客户端检查时，它工作正常，但不是使用 redux-saga fetch 方法。请帮助我。

【问题讨论】：

在实际代码中似乎是一个错字。你能确认一下吗？？
值得一试credentials: 'same-origin'。
您可以访问后端代码吗？如果是，那么您的后端使用什么语言？
是的，我有后端代码 - JAX-RS。但我不知道 java 我仍然可以尝试...
您尝试过小写的“用户名”和“会话令牌”键而不是“用户名”和“会话令牌”吗？

标签： javascript reactjs redux authorization redux-saga

【解决方案1】：

看起来是后端问题 - CORS 过滤器配置

如果后端在不同的服务器上（可能在同一台机器上，但在不同的应用服务器上，换句话说，在不同的端口上）你必须做一些 CORS 过滤器配置。

前端代码在服务器上运行 - 这意味着它是一个应用程序。 Postman 是一个客户端，就像 Google Chrome 或任何其他浏览器一样。这就是为什么您可以毫无问题地从 Postman 发出请求但从您的前端应用程序不成功的原因。

我猜你在后端启用了Access-Control-Allow-Origin 标头

现在您必须使用Access-Control-Allow-Headers允许您的自定义标题

【讨论】：

对我来说似乎也是合理的。邮递员正在执行一个 post 请求，而实际的 fetch 请求被阻止。

【解决方案2】：

每当我使用fetch 并且需要在请求中添加headers 时，我都会这样做：

headers: new Headers({
  Accept: 'application/json',
  Authorization: token,
  'Content-Type': 'application/json',
}),

所以您可能想尝试这种方法，为了调试此问题，您可能需要检查您的Netowrk 选项卡并验证哪些标头随请求一起发送。

【讨论】：

试过了，但没用。得到与上述相同的错误。
检查 API 文档，错误提示您没有提供正确的标头。您是否还检查了开发工具中的网络选项卡以确保您的标头已通过？

【解决方案3】：

您需要添加一个Authorization 不记名标头。

例如：

headers = new Headers({
    'Authorization': `Bearer ${authorizationCodeOrCredentials}`
});

在您的代码中：

return fetch(`{SERVICE API URL}`, {
  method: 'GET',        
  headers: {
    'Authorization': 'Bearer ' + someValue, // Add this line
    'userName': "username",
    'password': "password",
    'content-type': 'application/json'
  }
})
.then(response => response.json())
.then(json => dispatch(receivePosts(reddit, json)))

【讨论】：

我的服务只需要 sessionToken 和用户名，即使我尝试发送授权，仍然无法正常工作...得到 401
您是否尝试将userName 更改为username？在某些情况下，区分大小写很重要，具体取决于您的服务器如何解析事物。此外，看起来您也没有发送会话令牌。您的服务器专门寻找 username 和 sessiontoken，而不是 userName。

【解决方案4】：

如果你使用的是 Linux 系统并且如果你有 chrome...

使用以下命令运行您的 chrome

/opt/google/chrome/chrome --disable-web-security --user-data-dir

现在试试，如果一切正常，那么是后端的 CORS 问题。

【讨论】：