javascript - Setting authorization in native browser fetch -
i'm coming across issue can't seem set headers fetch request , think i'm missing something
var init = { method: 'get', headers: { 'accept': 'application/json', 'content-type': 'application/json', 'authorization': 'bearer mykey' } }; return fetch(url, init).then(function(response){... when request inspected in network tab, i'm not seeing headers set , instead see
access-control-request-headers:accept, authorization, content-type when expect see
authorization: bearer mykey content-type: application/json accept: application/json i've tried using native headers() 0 difference.
am missing here?
i having same issue , took bit of investigating evening. problem cross-origin resource sharing / cors. fetch default , makes things considerably more complex.
unless both origin , destination same cross-domain request, , these supported if request destination supports cors ( cross-origin resource sharing ). if not not go through. you'll see error no 'access-control-allow-origin' header present on requested resource
this why can not authorization headers on non-cors sites; see #5 , basic headers
forbidden header names:
- https://developer.mozilla.org/en-us/docs/glossary/forbidden_header_name
- https://fetch.spec.whatwg.org/#forbidden-header-name
and unfortunately, before try xmlhttprequest route, same applies: same xmlhttprequest:
- https://www.w3.org/tr/xmlhttprequest/#the-open()-method
- https://developer.mozilla.org/en-us/docs/web/api/xmlhttprequest
- http://arunranga.com/examples/access-control/credentialedrequest.html
finally, choices move forward are: 1. jsonp 2. write proxy not in browser 3. put cors on destination server
Comments
Post a Comment