当使用 mode: no-cors 请求时，浏览器不会添加我在前端代码中设置的请求标头

Question

在我的 React 应用程序中，我有以下 API POST 来允许用户编辑他们的个人资料（名称和图像）。

  static updateProfile(formData, user_id) {
    const request = new Request(`http://localhost:4300/api/v1/profiles/${user_id}`, {
      headers: new Headers({
        'Authorization': getBearerToken()
      }),
      mode: 'no-cors',
      method: "POST",
      body: formData
    });

    return fetch(request).then(response => {
      return response.json();
    }).catch(error => {
      return error;
    });
  }

上述问题是带有授权令牌的标头未在 POST 中发送...

如何获取要在上面的获取请求中发送的授权标头？

仅供参考，对于非多部分表单，授权令牌已成功发送，如下所示：

  static loadProfile(user_id) {
    const request = new Request(`http://localhost:4300/api/v1/profiles/${user_id}`, {
      headers: new Headers({
        'Authorization': getBearerToken(),
        'Accept'       : 'application/json',
        'Content-Type' : 'application/json',
      })
    });

    return fetch(request).then(response => {
      return response.json();
    }).catch(error => {
      return error;
    });
  }

Answer 1

如果您设置任何特殊的请求标头，则可以\xe2\x80\x99t 使用no-cors模式，因为使用它的效果之一是：它告诉浏览器不允许您的前端 JavaScript 代码设置除CORS 安全列表 request-headers之外的任何请求标头。看规格要求：

\n

\n

将名称/值对附加到Headers对象（headers），请运行以下步骤：

\n

\n
5. 否则，如果防护是“ request-no-cors”并且名称/值不是CORS 安全列表请求标头，则返回。
\n

\n

\n

在该算法中，return等于 \xe2\x80\x9creturn，而不将该标头添加到 Headers 对象\xe2\x80\x9d。

\n

Authorization不是\xe2\x80\x99t 是CORS 安全列表的请求标头，因此您的浏览器\xe2\x80\x99t 不允许您设置是否使用no-cors请求模式。同样适用于Content-Type: application/json。

\n

如果您尝试使用模式的原因no-cors是为了避免在不使用模式时发生的某些其他问题，则解决方案是修复其他问题的根本原因。因为无论您想解决什么问题，no-cors模式\xe2\x80\x99最终都不会成为解决方案。它\xe2\x80\x99s只会产生不同的问题，就像你\xe2\x80\x99遇到的问题一样。

\n