如何使用带有令牌身份验证的浏览器提取来发出API请求

Question

我正在尝试使用fetch（browser）发出API请求。 标头中需要令牌才能发出请求。

我可以在节点（服务器端）中成功发出请求。 但是，在浏览器上发出请求时， OPTIONS请求失败并显示401。

const order_url = new URL(process.env.API_URL + 'orders/');
const params = { type: 'amazon', status: 'in_queue' };
Object.keys(params).forEach(key => url.searchParams.append(key, params[key]));

const headers = {
    Authorization: 'Token ' + process.env.API_TOKEN,
    'Content-Type': 'application/x-www-form-urlencoded'
};

fetch(order_url, {
  headers
})
  .then(response => response.json())
  .then(result => {
    console.log(result);
  })
  .catch(error => {
    console.error(error)
  })

我收到的错误是"NetworkError when attempting to fetch resource."出现"NetworkError when attempting to fetch resource." 要在浏览器上正常运行，应采用什么正确的配置？

Answer 1

您没有正确发送标题。 尝试这个。

myHeaders = new Headers({
  'Authorization': 'Token ' + process.env.API_TOKEN,
  'Content-Type': 'application/x-www-form-urlencoded'
});

接着

fetch(order_url, {
  headers: myHeaders,
  method: 'GET'
})