使用Fetch API发送类型：multipart / form-data，如何发送授权标头？ [英] With a Fetch API sending type:multipart/form-data, how to send an Authorization Header?

问题描述

在我的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, 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-safelisted request-headers 以外的任何请求标头。请参阅规范要求：

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:

将名称/值（名称 / 值）对附加到标题 object（ 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-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".

授权不是 CORS-safelisted request-header ，因此如果您使用<浏览器将不允许您设置模式：'请求的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.

如果您尝试使用<$ c的原因$ c> mode：'no-cors'是为了避免在你不使用时出现的其他问题，解决方法是解决其他问题的根本原因。因为一般来说无论你可能试图解决什么问题，模式：'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.

这篇关于使用Fetch API发送类型：multipart / form-data，如何发送授权标头？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！