axios auth 字段未设置标题

Question

我将 auth 传递给 axios 请求，但它没有设置授权标头：

axios({
  method: 'GET',
  url: 'http://localhost:3001',
  auth: {
    username: 'foo',
    password: 'bar',
  },
}).then(console.log)

我错过了什么吗？

Answer 1

当我从这里复制您的代码：https://jsfiddle.net/jfriend00/w7ykvc16/9/ 时，axios 会为我生成 authorization: 'Basic Zm9vOmJhcg=='，但仅在第二个请求中，因为第一个请求是获得 COR 飞行前许可的 OPTIONS 请求。

由于我是从不同的来源执行此操作，因此我必须在我的 localhost 服务器上启用 CORs 请求，然后才能获取标头。授权标头不会在初始 COR 飞行前 OPTIONS 请求中发送。而且，如果您没有处理该 OPTIONS 请求的代码，则 CORs 权限将被拒绝，然后永远不会发送带有 Authorization 标头的第二个请求。

这是我的服务器从上面的 JSFiddle 链接收到的内容：

OPTIONS {
  host: 'localhost',
  connection: 'keep-alive',
  accept: '*/*',
  'access-control-request-method': 'GET',
  'access-control-request-headers': 'authorization',
  origin: 'https://fiddle.jshell.net',
  'user-agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.110 Safari/537.36',
  'sec-fetch-mode': 'cors',
  'sec-fetch-site': 'cross-site',
  'sec-fetch-dest': 'empty',
  'accept-encoding': 'gzip, deflate, br',
  'accept-language': 'en-US,en;q=0.9'
}
GET {
  host: 'localhost',
  connection: 'keep-alive',
  'sec-ch-ua': '" Not A;Brand";v="99", "Chromium";v="96", "Google Chrome";v="96"',
  accept: 'application/json, text/plain, */*',
  dnt: '1',
  authorization: 'Basic Zm9vOmJhcg==',
  'sec-ch-ua-mobile': '?0',
  'user-agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.110 Safari/537.36',
  'sec-ch-ua-platform': '"Windows"',
  origin: 'https://fiddle.jshell.net',
  'sec-fetch-site': 'cross-site',
  'sec-fetch-mode': 'cors',
  'sec-fetch-dest': 'empty',
  'accept-encoding': 'gzip, deflate, br',
  'accept-language': 'en-US,en;q=0.9',
  'if-none-match': 'W/"2-witfkXg0JglCjW9RssWvTAveakI"'
}

请注意，第一个请求是一个 OPTIONS 请求（CORs pre-flight）并且不包括Authorization 标头。第二个是 GET 请求并包含它（在飞行前获得批准后）。