CODEWITHSUNDEEP
javascriptecmascript-6requesthttp-getfetch-api
Randy
Randy

Reputation: 9809

Creating a get request using fetch - only options is send

I'm trying to create a get request using Fetch. The request looks like this:

fetch('https://requestb.in/14ikb6j1', {
  method: 'get',
  headers: {
    'Authorization': 'Token token=xxxxx'
  }});

If I make this request to my own server, it fails on the options request every time. I cannot figure out why.

If I make this request to requestbin, there is an options request first. However, after receiving the options response, the actual get request is never made.

This is what requestbin received:

OPTIONS /14ikb6j1

HEADERS

Referer: http://localhost:9000/
Host: requestb.in
Total-Route-Time: 0
Via: 1.1 vegur
Accept-Encoding: gzip
Cf-Visitor: {"scheme":"https"}
Cf-Ipcountry: NL
Cf-Ray: 36edd35d1cad2b28-AMS
Cf-Connecting-Ip: 37.153.231.90
Connection: close
User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36
Accept: */*
Connect-Time: 1
Access-Control-Request-Method: GET
Content-Length: 0
Accept-Language: nl-NL,nl;q=0.8,en-US;q=0.6,en;q=0.4
X-Request-Id: 69b120c1-0f18-454b-a7fd-91f082252a06
Access-Control-Request-Headers: authorization
Origin: http://localhost:9000

This is what chrome logs:

chrome dev tools

The strangest thing is, I get a 200 - OK status as result. The console however, still logs this:

Fetch API cannot load https://requestb.in/14ikb6j1. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:9000' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled. :9000/#/branching:1 Uncaught (in promise) TypeError: Failed to fetch

But if I make this request using Postman it does work:postman request

GET /14ikb6j1
HEADERS

Cf-Ipcountry: NL
Cf-Ray: 36eddb797ebf7223-AMS
Authorization: Token token=xxxx
User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36
Total-Route-Time: 0
Via: 1.1 vegur
Connection: close
Cf-Connecting-Ip: 37.153.231.90
Connect-Time: 0
Accept-Language: nl-NL,nl;q=0.8,en-US;q=0.6,en;q=0.4
Postman-Token: 57486701-6f9a-4aab-be1b-776f0d376920
Accept: */*
Host: requestb.in
X-Request-Id: 73a7a35e-0d89-41fd-b760-2aa952349871
Accept-Encoding: gzip
Cf-Visitor: {"scheme":"https"}
Cache-Control: no-cache

How can I make this get request with authentication headers work?

Upvotes: 3

Views: 3875

Answers (1)

Forivin
Forivin

Reputation: 15488

This is probably a CORS problem. The server you are seinding the request to doesn't allow requests from a different domain. Check your browser console and look for errors. You might find somehting like this:

Fetch API cannot load https://requestb.in/14ikb6j1. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://localhost:9000' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Upvotes: 2

Related Questions