javascript - HTTP header 未通过 fetch() 发送

Question

我正在尝试在我的应用上配置后端 API，以下是发送请求的代码:

static async xhr(endpoint, args, method) {
  const url = `${API_SERVER}${endpoint}`;
  let formBody = [];
  for (let property in args) {
      let encodedKey = encodeURIComponent(property);
      let encodedValue = encodeURIComponent(args[property]);
      formBody.push(encodedKey + "=" + encodedValue);
  }
  formBody = formBody.join("&");
  let options = Object.assign({ method: method }, args ? { body: formBody } : null );
  try {
    let headers = {
        'Accept': 'application/json',
        'Content-Type': 'application/x-www-form-urlencoded',
    };
    accessToken = 'bdi8HD8js91jdoach7234h';
    if(accessToken != null)
        headers['Authorization'] = accessToken;
    options.headers = headers;
    return fetch(url, options).then( resp => {
        console.log(resp);
        let json = resp.json();
        if(resp.status >= 200 && resp.status < 300) {
            if (resp.ok) {
                return json
            }
        } else {
            return {};
        }
        return json.then(err => {throw err});
    });
  } catch (error) {
      return null;
  }
}

注意:我调试并发现 header 已正确添加到选项变量中，但由于某种原因，服务器未接收 Authorization header 。

我使用 Postman 发送具有完全相同 header 的完全相同的请求，并且我通过它获得了正确的响应。我不知道出了什么问题，除非首先没有发送 header 。

有人可以告诉我我做错了什么吗？谢谢!

Answer 1

headers 选项必须是 Headers 的实例。您可以将当前的 headers 对象转换为 Headers 实例，方法是将其传递给其构造函数，如下所示:

const headers = new Headers({
    'Accept': 'application/json',
    'Content-Type': 'application/x-www-form-urlencoded',
});

请注意，我还将 let 替换为 const，因为该变量不会被重新分配。

要更改 header 或向该 Headers 实例添加新 header ，您可以使用 set method 。而不是 headers['Authorization'] = accessToken 你会做...

headers.set('Authorization', accessToken)