fetch API: Can't add Authorization on Request Header with Chrome

http cors fetch fetch-api preflight
Seven Lee picture Seven Lee · Mar 19, 2017 · Viewed 8.9k times · Source

Chrome version: 57.0.2987

Actually, in older Chrome version I also have this problem. I added Authorization on Request Header with my access token,

fetch('https://example.com/endpoint', {
  method: 'GET',
  headers: {
    'Authorization': 'Bearer ' + accesstoken
  }  
})

I always get Access-Control-Allow-Headers:authorization on Response Header in Chrome Besides, My fetch is always Request Method:OPTIONS (not display GET), then Status Code is 200 OK in Chrome

But if I run the same fetch code in Firefox (ver 52.0.1 ), everything works great. I can add Authorization on Request Header correctly. It won't display Access-Control-Allow-Headers:authorization on Response Header in Firefox. It will display Authorization: Bearer accesstoken on Request header.

The server side already processed CORS for my request header..

This is a Chrome bug or my code fault? How should I do to make Authorization on Request Header correctly in Chrome?

Below image is the detail Network in Chrome dev tool: Below image is the detail Network in Chrome dev tool:

Below image is the detail Network in Firefox dev tool: enter image description here

Answer

Seven Lee picture Seven Lee · Aug 29, 2017

As @stackdave said, browser send OPTIONS request before GET request when cross-domain ajax. Then browser will wait server response. My situation that the server didn't response, so browser just stop OPTIONS status. Server need to handle this issue, it's still CORS issue, not fetch api bug or issue.

Related questions

Fetch API, custom request headers, CORS, and cross-origin redirects

I need to make an HTTP GET request with custom request headers in-browser and process the result as it streams in. The Fetch API is ideal for this: fetch('https://example.com/resource', { method: 'GET', headers: { 'X-Brad-Test': 'true' }, cache: 'no-store', …

Read More
Response to preflight request doesn't pass access control check

I'm getting this error using ngResource to call a REST API on Amazon Web Services: XMLHttpRequest cannot load http://server.apiurl.com:8000/s/login?login=facebook. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present …

Read More
"Cross origin requests are only supported for HTTP." error when loading a local file

I'm trying to load a 3D model into Three.js with JSONLoader, and that 3D model is in the same directory as the entire website. I'm getting the "Cross origin requests are only supported for HTTP." error, but I don't …

Read More