使用模式：无要求时，浏览器未添加我在前端代码中设置的请求标头 [英] When using mode: no-cors for a request, browser isn’t adding request header I’ve set in my frontend code

问题描述

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

in my React app, I have the following API POST to allow the user to edit their profile (name and image).

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

The problem with the above is the header with the Authorization token is not being sent in the POST...

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

How can I get the Authorization header to be send in the fetch request above?

FYI，对于非多部分形式，授权令牌已成功发送，如下所示：

FYI, for non-multipart forms, the authorization token is sent successfully like so:

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

推荐答案

您不能使用 mode：'no-cors'如果要设置任何特殊的请求标头，因为将其用于请求的影响之一是它告诉浏览器不允许您的前端JavaScript代码设置除 CORS安全列出的请求标头以外的任何请求标头。请参见规范要求：

You can’t use mode: 'no-cors' if you want set any special request headers, because one of the effects using it for a request is that it tells browsers to not allow your frontend JavaScript code to set any request headers other than CORS-safelisted request-headers. See the spec requirements:

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

To append a name/value (name/value) pair to a Headers object (headers), run these steps:

1. 否则，如果 guard 是 request-no-cors ，而 name / value 不是 CORS安全列表的请求标头，返回。

1. Otherwise, if guard is "request-no-cors" and name/value is not a CORS-safelisted request-header, return.

在该算法中， return 等同于

授权不是 CORS安全列表的请求标头，因此如果您使用 mode：无底线 的请求。对于 Content-Type：application / json 。

Authorization isn’t a CORS-safelisted request-header, so your browser won’t allow you to set if you use mode: 'no-cors'for a request. Same for Content-Type: application/json.

如果您尝试使用<$ c的原因$ c> mode：'no-cors'可以避免不使用时发生的其他问题，解决方案是解决该其他问题的根本原因。因为总的来说，无论您想解决什么问题，模式：无心 最终都不会成为解决方案。只会造成其他问题，例如您现在遇到的问题。

If the reason you’re trying to use mode: 'no-cors' is to avoid some other problem that occurs if you don’t use, the solution is to fix the underlying cause of that other problem. Because in general no matter what problem you might be trying to solve, mode: 'no-cors' isn’t going to turn out to be a solution in the end. It’s just going to create different problems like what you’re hitting now.

这篇关于使用模式：无要求时，浏览器未添加我在前端代码中设置的请求标头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！