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头.

我的后端是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)
    ...
}

,谷歌的云计算功能的火力地堡的控制台日志不包含任何X-My-Custom-Header也不Authorization头.

怎么了？

---

编辑1

因此,使用Chrome中的开发工具检查既没有X-My-Custom-Header也没有Authorization从浏览器发送标题...现在的问题是:为什么？我如何解决它？

---

编辑2

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

Answer 1

该同源策略限制种类的网页可以从其他产地发送到资源的请求.

在该no-cors 模式中,浏览器仅限于发送"简单"请求 - 仅具有安全列表方法和安全列表标头的请求.

为了与像头发送跨域请求Authorization和X-My-Custom-Header,你必须放下no-cors模式,并支持预检要求(OPTIONS).

"简单"和"非简单"请求之间的区别是出于历史原因.网页总是可以通过各种方式(例如创建和提交表单)执行一些跨源请求,因此当Web浏览器引入了发送跨源请求(跨源资源共享或CORS)的原则手段时,它是决定这种"简单"的请求可以免于飞行前OPTIONS检查.

Answer 2

首先:使用对象而不是new Headers(..):

fetch('www.example.net', {
  method: 'POST',
  headers: {
    'Content-Type': 'text/plain',
    'X-My-Custom-Header': 'value-v',
    'Authorization': 'Bearer ' + token,
  }
});

其次:很高兴知道,标题是小写的fetch!!

Thridly:no-cors模式限制使用标题到此白名单:

• Accept
• Accept-Language
• Content-Language
• Content-Type并且,其值是(application/x-www-form-urlencoded,multipart/form-data,text/plain)

这就是为什么只Content-Type发送你的标题而不是X-My-Custom-Header或Authorization.

Answer 3

你能试试这个吗？

fetch(serverEndpoint, {  
  credentials: 'include'  
})

参考号 https://developers.google.com/web/updates/2015/03/introduction-to-fetch#sending_credentials_with_a_fetch_request