javascript – fetch()不发送标头？

我从浏览器发送这样的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标头.

我的后端是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标头.

怎么了？

编辑1

因此,使用Chrome中的开发工具检查X-My-Custom-Header和Authorization标头都不是从浏览器发送的……现在的问题是：为什么？我如何解决它？

编辑2

有关我的应用程序的更多信息：这是React应用程序.我已经禁用了服务人员.我尝试使用req.headers.append()创建Request并专门添加标头.标题仍然不会发送.

解决方法:

same-origin policy限制了Web页面可以从另一个源发送到资源的请求类型.

在no-cors mode中,浏览器仅限于发送“简单”请求 – 仅限于safelisted methods和safelisted headers的请求.

要使用诸如Authorization和X-My-Custom-Header之类的标头发送跨源请求,您必须删除no-cors模式并支持预检请求(OPTIONS).

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

标签：fetch-api,javascript,post,http,cors
来源： https://codeday.me/bug/20191004/1852307.html