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应用程序。我已经禁用了服务人员。我尝试使用创建Request和专门添加标头req.headers.append()。标头仍然不会发送。

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

在此no-cors 模式下，浏览器仅限于发送“简单”请求-具有安全列出的方法和安全列出的标头的请求仅。

要发送标头为Authorization和的跨域请求X-My-Custom-Header，您必须删除no-cors模式并支持预检请求（OPTIONS）。

“简单”和“非简单”请求之间的区别是出于历史原因。网页始终可以通过各种方式（例如创建和提交表单）执行一些跨域请求，因此，当Web浏览器引入一种原理性的发送跨域请求的方法（跨域资源共享或CORS）时，它就是决定可以从飞行前OPTIONS检查中免除这种“简单”请求。

首先：使用对象代替new Headers(..)：

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

第二：很高兴知道，标题由fetch!!小写！

第三：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。

你可以试试这个吗？

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

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

我也有同样的问题。我通过从javascript中删除“ no-cors”并在服务器端Spring Boot中添加以下内容来解决此问题。

public class WebSecurityConfig extends WebSecurityConfigurerAdapter {
        protected void configure(HttpSecurity httpSecurity) throws Exception {
             .antMatchers(HttpMethod.OPTIONS, "/**").permitAll()

        }
    }

1：当您在exports.createCompany函数中调用标头时，let headers = ['Headers: ']使用H大写字母而不是小写字母h可能会导致错误。您还应该在标题中的令牌后加上一个逗号，该逗号不应位于该逗号中。

第二：每当我在react native中使用获取请求时，header:不需要new Headers它。

尝试这个：

fetch(serverEndpoint, {
    method: 'POST',
    mode: 'no-cors',
    redirect: 'follow',
    headers:{
      'Content-Type': 'text/plain',
      'X-My-Custom-Header': 'value-v',
      'Authorization': 'Bearer ' + token
    },
    body: companyName
})