javascript - fetch() 不发送标题？

Question

我正在从浏览器发送这样的 POST 请求:

fetch(serverEndpoint, {
    method: 'POST',
    mode: 'no-cors', // this is to prevent browser from sending 'OPTIONS' method request first
    redirect: 'follow',
    headers: new Headers({
            'Content-Type': 'text/plain',
            'X-My-Custom-Header': 'value-v',
            'Authorization': 'Bearer ' + token,
    }),
    body: companyName
})

当请求到达我的后端时，它不包含 X-My-Custom-Header 或 Authorization header 。

我的后端是用于 Firebase 的 Google Cloud 函数(基本上只是 Node.js 端点)，如下所示:

exports.createCompany = functions.https.onRequest((req, res) => {
    let headers = ['Headers: ']
    for (let header in req.headers) {
        headers.push(`${header} : ${req.headers[header]}`)
    }
    console.log(headers)
    ...
}

该 Google Cloud for Firebase 函数的控制台日志不包含任何 X-My-Custom-Header 或 Authorization header 。

怎么了？

---

编辑1

因此，在 Chrome 中使用开发工具检查浏览器是否发送了 X-My-Custom-Header 和 Authorization header ……现在的问题是:为什么？我该如何解决？

---

编辑2

有关我的应用程序的更多信息:它是 React 应用程序。我禁用了服务人员。我尝试创建 Request 并使用 req.headers.append() 特别添加 header 。标题仍然不会发送。

Answer 1

same-origin policy限制网页可以从另一个来源发送到资源的请求类型。

在 no-cors 中 mode ，浏览器仅限于发送“简单”请求——那些带有 safelisted methods 的请求和 safelisted headers仅。

要发送带有 Authorization 和 X-My-Custom-Header header 的跨源请求，您必须删除 no-cors 模式并支持预检请求(OPTIONS)。

“简单”和“非简单”请求之间的区别是出于历史原因。网页总是可以通过各种方式(例如创建和提交表单)执行一些跨域请求，因此当 Web 浏览器引入发送跨域请求的原则性方法(cross-origin resource sharing 或 CORS)时，决定这种“简单”的请求可以免除预检 OPTIONS 检查。