AJAX 访问代理提供的基本身份验证后的节点 API

Question

我得到了一个用 node.js 编写的普通 API，比如这个：

const express = require('express')
const app = express();

app.post('/api/data', (req, res) => {
  res.status(200).json({
    data: [1,2,3,3,1,3,5,2,3,4,4,7]
  })
})

app.use('/gui', express.static('./gui'))

app.listen(8080, () => { console.log("OK") })

以及使用fetch 函数访问它的客户端javascript 代码，这种方式（例如./gui/index.html）：

fetch('/api/data', {
  method: 'post',
  headers: {
    'Accept': 'application/json', 'Content-Type': 'application/json'
  },
  body: JSON.stringify(json)
})
.then( res => { console.log(res })

它工作正常，但现在我想把这个 API 放在基本身份验证之后，而不用改变 API 代码，使用 nginx 作为中间人。配置文件如下所示：

server {
  listen 80;

  location / {
    auth_basic "Private Area";
    auth_basic_user_file .htpasswd; 

    proxy_pass http://localhost:8080;
    proxy_set_header   Host             $host;
    proxy_set_header   X-Real-IP        $remote_addr;
  }
}

现在，当我在浏览器中打开页面时，它会询问身份验证信息，显示 HTML，但 AJAX 访问失败并出现 401 错误。

检查后，浏览器似乎没有为 AJAX 访问发送授权标头。

问题是：有没有办法让基本身份验证对我的 API 和 GUI 透明？我做错了什么？

编辑

有人建议这个问题与Basic authentication with fetch?重复

我知道如何明确设置要获取的标头。我想要的是浏览器在应用程序落后于基本身份验证时隐式设置它们，而不需要对我的客户端代码进行任何修改。

Answer 1

根据@Tomalak 的建议，并根据https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

默认情况下，fetch 不会从服务器发送或接收任何 cookie，如果站点依赖于维护用户会话（要发送 cookie，必须设置凭据 init 选项），则会导致未经身份验证的请求。

换句话说，我所要做的就是修改我的调用以获取这种方式：

fetch('/api/data', {
  credentials: 'include',
  method: 'post',
  headers: {
    'Accept': 'application/json', 'Content-Type': 'application/json'
  },
  body: JSON.stringify(json)
})
.then( res => { console.log(res) })

注意 fetch 选项中的 credentials: 'include'（可以使用 same-origin 代替 include 以获得更严格的安全性）。

这样，浏览器将在必要时隐式设置身份验证标头。