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

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

怎么了？

---

编辑 1

因此，使用 Chrome 中的开发工具检查是否没有从浏览器发送 X-My-Custom-Header 和 Authorization 标头...现在的问题是：为什么？我该如何解决？

---

编辑 2

关于我的应用的更多信息：它是 React 应用。我有残疾服务人员。我试图创建Request 并专门使用req.headers.append() 添加标题。标题仍然不会发送。

Answer 1

same-origin policy 限制了网页可以向其他来源的资源发送的请求类型。

在no-corsmode 中，浏览器仅限于发送“简单”请求——仅限safelisted methods 和safelisted headers。

要发送带有 Authorization 和 X-My-Custom-Header 等标头的跨域请求，您必须放弃 no-cors 模式并支持预检请求 (OPTIONS)。

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

Answer 2

你可以试试这个吗？

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

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

Answer 3

第一个：当您在 exports.createCompany 函数中调用标头时，let headers = ['Headers: '] 带有大写 H 而不是小写 h，这可能会导致错误。您在标头中的标记后还有一个逗号，不应该存在。

第二：每次我在 react native 中使用 fetch 请求时，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
})

Answer 4

首先：使用对象而不是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。

Answer 5

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

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

        }
    }