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

2022-01-15 00:00:00 cors reactjs javascript fetch-api

在我的 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...

如何在上面的 fetch 请求中获取要发送的 Authorization 标头?

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

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

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

推荐答案

如果你设置了任何特殊的请求头，你不能使用 no-cors 模式，因为使用它的效果之一request 是它告诉浏览器不允许您的前端 JavaScript 代码设置除 CORS 安全列出的请求标头.请参阅规范要求:

You can’t use no-cors mode if you set any special request headers, because one of effect of 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:

要将 name/value 对附加到 Headers 对象 (headers)，请运行以下步骤:

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

  1. 否则，如果 guard 是request-no-cors"；并且 name/value 不是 CORS-safelisted request-header，返回.
  1. Otherwise, if guard is "request-no-cors" and name/value is not a CORS-safelisted request-header, return.

在该算法中，return 等同于在不将该标头添加到 Headers 对象的情况下返回".

In that algorithm, return equates to "return without adding that header to the Headers object".

Authorization 不是 CORS-safelisted request-header，因此如果您使用 mode: 'no-cors' 请求，您的浏览器将不允许您设置.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.

如果您尝试使用 no-cors 模式的原因是为了避免在不使用时出现的其他问题，则解决方案是修复导致其他问题的根本原因.因为无论您试图解决什么问题，mode: 'no-cors' 最终都不会成为解决方案.它只会产生不同的问题，比如你现在遇到的问题.

If the reason you’re trying to use no-cors mode 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 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.

相关文章