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

Question

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 - 未经授权的错误且响应为缺少请求标头。

尝试向身体发送授权内容 - 得到相同的错误401 - 未经授权的错误。

编辑：

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

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

Answer 1

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

如果后端位于不同的服务器上（可能位于同一台计算机上，但位于不同的Application Server中，换句话说，位于不同的端口上），则必须执行一些CORS过滤器配置。

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

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

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

Answer 2

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

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

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

Answer 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)))

Answer 4

如果您使用的是Linux系统＆amp;如果你有铬...

使用以下命令运行您的chrome

  

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

立即尝试，如果一切正常，那么来自Backend的 CORS 问题。