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

Question

I'm trying to make an API request using fetch(browser). A token is required in the headers to make the request.

I can make successful requests in node (server side). However, when making requests on the browser, the OPTIONS request fails with 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)
  })

The error i receive is "NetworkError when attempting to fetch resource." What would be the correct configuration for this to work on the browser?

Answer 1

You are not sending headers properly. Try this.

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

and then

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