正在发送没有授权标头的 React 请求答案

【问题标题】：React request is being sent without an Authorization header正在发送没有授权标头的 React 请求
【发布时间】：2020-02-21 13:21:02
【问题描述】：

我正在尝试在我的标头中将不记名令牌传递给 fastify http 服务器。

我将请求中的标头设置为：

...
const headers = {
  Accept: 'application/json',
  'Content-Type': 'application/json'
}
const token = localStorage.getItem('token')
if (token) {
  headers['Authorization'] = `Bearer ${token}`
}
const newOptions = {
  ...options,
  mode: 'no-cors',
  headers
}
console.log('options:', newOptions)
return fetch(url, newOptions)

我的 console.log 打印：

options: {
  mode: "no-cors", 
  headers: {
    Accept: "application/json",
    Content-Type: "application/json",
    Authorization: "Bearer NQ9xQLmYtq92aT8JHHRd7DGZJ..."
  }
}

在 Chrome 网络选项卡中，我查看了标题，Authorization 只是不存在在那里。我的路由处理函数如下：

async function user(server, options) {
  server.route({
    method: 'GET',
    url: '/user/:email',
    handler: async (req, res) => {
      const username = req.params.email
      console.log('user email:', username)
      console.log('headers:', req.headers)
      res.send({
        type: 'promoter'
      })
    }
  })
}

当我在服务器上打印标题时，它也没有Authorization，显示：

headers: { host: 'localhost:5000',
  connection: 'keep-alive',
  pragma: 'no-cache',
  'cache-control': 'no-cache',
  accept: 'application/json',
  'sec-fetch-dest': 'empty',
  'user-agent': 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.106 Safari/537.36',
  'sec-fetch-site': 'same-site',
  'sec-fetch-mode': 'no-cors',
  referer: 'http://localhost:3000/admin',
  'accept-encoding': 'gzip, deflate, br',
  'accept-language': 'en-US,en;q=0.9,ru;q=0.8' }

我错过了什么？

另一个有趣的问题是，当我从 Postman 运行请求时，它显示 200 响应代码，并且 fastify 将 200 打印到日志中。但是，从传奇/请求运行：

  return fetch(url, newOptions)
    .then(checkStatus)
    .then(parseJSON)

我在请求方法中得到response.status 的0 而不是200，而服务器日志仍然显示"res":{"statusCode":200}。

【问题讨论】：

标签： reactjs http-headers authorization bearer-token fastify

【解决方案1】：

我发现了问题所在。

显然，当与no-cors 模式结合使用时，我的 Chrome 版本 - Version 80.0.3987.106 (Official Build) (64-bit) 以及其他浏览器和旧版本的 Chrome 也会去掉 authorization 标头。启用CORS 并设置适当的标头可以解决问题。

【讨论】：

如果你显示你添加的标题，这个解决方案会更有用:)

【解决方案2】：

尝试将withCredentials: true 和credentials: 'include' 添加到您的选项中：

options: {
  mode: "no-cors",
  withCredentials: true, // <-- ADD THIS
  credentials: 'include', // <-- AND THIS
  headers: {
    Accept: "application/json",
    Content-Type: "application/json",
    Authorization: "Bearer NQ9xQLmYtq92aT8JHHRd7DGZJ..."
  }
}

参考：https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Credentials

【讨论】：

不幸的是，没有区别。我想知道 fastify 是否有可能以某种方式禁用授权标头，在协商期间禁止它。
我已经看到一些服务器的授权标头被服务器配置设置阻止。我不熟悉 fastify，尽管您仍然应该在开发工具的网络选项卡中看到标头正在传递。
它是否发送了一个 OPTIONS 预检请求？也许这是一个 CORS 问题。
我启用了no-cors 模式，它将请求发送到另一个端口。我认为CORS 是一个不太可能的候选人，但也许。感谢您帮助解决这个问题。非常感谢。