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 a中使用开发工具检查

X-My-Custom-Header

和

Authorization

头是否从浏览器发送。。。现在的问题是：为什么？我怎么修理它

---

编辑2 有关我的应用程序的更多信息：它是React应用程序。我有一个残疾的服务工人。我试图创建

请求

，并使用

req.headers.append（）

专门添加头。标题仍然无法发送

限制了网页可以从其他来源发送到资源的请求类型

在

无cors

中，浏览器仅限于发送“简单”请求，即带有或仅限于的请求

要发送带有头信息（如

Authorization

和

X-My-Custom-Header

）的跨源请求，您必须放弃

无cors

模式并支持飞行前请求（

选项

）

“简单”和“非简单”请求之间的区别是出于历史原因。网页总是可以通过各种方式（如创建和提交表单）执行一些跨源请求，因此，当Web浏览器引入了发送跨源请求的原则性方法（、或COR）时，人们认为这种“简单”请求可以免除飞行前

选项检查。
您能试试吗

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

参考
1st:当您在exports.createCompany函数中调用headers时，您的
let headers=['headers:']
带有大写字母
H
，而不是小写字母
H
，这可能会导致错误。标题中的标记后面还有一个逗号，不应该有

第二：每次我在react native中使用fetch请求时，
头：
不需要
新头

试试这个：

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
})

首先：使用对象而不是
新标题（..）
：

其次：很高兴知道，标题由
fetch
小写

第三：
无cors
模式将标题的使用限制在此白名单中：


接受
接受语言
内容语言
内容类型
，其值为（
应用程序/x-www-form-urlencoded
，
多部分/表单数据
，
文本/普通
）

这就是为什么只发送您的
内容类型
标题，而不发送
X-My-Custom-header
或
授权
我也有同样的问题。我通过从javascript中删除“no cor”并在服务器端spring boot中添加以下内容来解决这个问题

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

        }
    }

您的浏览器是否确实发送了标题？检查您的开发工具。@JoeClay我是经验丰富的开发人员（移动、后端），但对web前端开发还比较陌生。很多工具对我来说都是新的，尤其是brownser中的开发工具还不是我的好朋友。你能建议我如何在Chrome或Safari上查看它吗？感谢Chrome，按F12打开开发工具，然后切换到网络选项卡。当您的应用程序发送HTTP请求时，它将出现在列表中，您可以单击它查看请求和响应的标题/正文。有关更多信息，请参阅-如果您刚刚开始web开发，了解如何使用浏览器的开发工具将帮助您加载：）@JoeClay，因此答案是否定的浏览器不发送
X-My-Custom-Header
或
授权
。现在剩下的问题是为什么？如何修复它？请看伟大的答案，谢谢。然而，这并不是让我高兴的答案。“我现在正试图增加对CORS的支持。”sideshowbarker是的，当然。它是。仅仅支持CORS似乎不是很好straightforward@sideshowbarker看看我的个人资料、年龄、徽章和老问题。从这一点你应该明白，我知道我问了什么，以及如何标记aswer接受，谢谢。如果你真的想建议别人如何处理答案和奖金，你可以在meta上这样做。至于这个答案，我可能只会在服务器上支持CORS后将其标记为已接受。没有这一点，我没有证据证明这真的有效（而且500是一个很大的重复花费在错误的答案）。此外，您应该知道，我没有义务将其标记为已接受，即使它有效，因为我可能会等待更多/更好的答案。如上所述，为了避免误解：我非常喜欢Vasily的答案，因为它质量很高，一旦我能在后端（Firebase功能）上获得CORS支持，如果它有效，我很可能会被接受。这可能会有所帮助。关于尾随逗号的一个注意事项是，它正在成为ES2017标准，但人们一直将其与Babel（）一起使用，而且NodeJS从版本
6.4.0
开始就支持它。这不应该影响OP，因为我之前成功地使用了带
fetch（）
的尾随逗号。这个答案既没有解决第一个问题，也没有解决第二个问题。它只是给出了一些语法更正。这是不是缺少一些代码？方法体如何以“.”开头？这应该是HttpSecurity。

？

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

        }
    }