Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why multiple OPTIONS request are sent, even if Access-Control-Allow-Origin is set to *?

I have built an API (api.example.com) and want it to be accessible from www.example.com
I also want it to be accessible from other domains.

For that I have added Access-Control-Allow-Origin: *

But when I open www.example.com, a preflight request (OPTIONS request) is sent before all the api requests
How do I stop multiple preflight request ? I think there should be only one preflight request, what am I doing wrong !!! ? Or is it natural that browser has to send preflight request before each and every call ?
Note: I dont want to use JSONP as I am making it publicly accessible Access-Control-Allow-Origin: *

OPTIONS Call header

Accept:*/*
Accept-Encoding:gzip,deflate,sdch
Accept-Language:en-US,en;q=0.8
Access-Control-Request-Headers:accept, authorization
Access-Control-Request-Method:GET
AlexaToolbar-ALX_NS_PH:AlexaToolbar/alxg-3.2
Connection:keep-alive
Host:api.touchtalent.biz
Origin:http://www.example.com
Referer:http://www.example.com/artist/52894/pratim-relekar
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1916.114 Safari/537.36

OPTIONS Call response

Access-Control-Allow-Headers:origin, x-requested-with, content-type, Authorization
Access-Control-Allow-Methods:PUT, GET, POST, DELETE
Access-Control-Allow-Origin:*
Connection:Keep-Alive
Content-Encoding:gzip
Content-Length:163
Content-Type:text/html
Date:Fri, 13 Jun 2014 14:24:55 GMT
Keep-Alive:timeout=5, max=98
Server:Apache/2.2.22 (Ubuntu)
Vary:Accept-Encoding
X-Powered-By:PHP/5.4.6-1ubuntu1.8

GET request request header

Accept:application/json, text/plain, */*
Accept-Encoding:gzip,deflate,sdch
Accept-Language:en-US,en;q=0.8
AlexaToolbar-ALX_NS_PH:AlexaToolbar/alxg-3.2
Authorization:Bearer VtQJqaTGd7YFb8Mee6GfiLwiRrUdt2iCp9ITuiUE
Connection:keep-alive
Host:api.touchtalent.biz
Origin:http://www.example.com
Referer:http://www.example.com/artist/52894/pratim-relekar
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1916.114 Safari/537.36

GET request response header

Access-Control-Allow-Headers:origin, x-requested-with, content-type, Authorization
Access-Control-Allow-Methods:PUT, GET, POST, DELETE
Access-Control-Allow-Origin:*
Connection:Keep-Alive
Content-Length:1116
Content-Type:application/json
Date:Fri, 13 Jun 2014 14:24:55 GMT
Keep-Alive:timeout=5, max=97
Server:Apache/2.2.22 (Ubuntu)
Status:200
X-Powered-By:PHP/5.4.6-1ubuntu1.8

Although I did not want to provide a URL as it will break as development proceeds. But if it may help: http://www.touchtalent.biz/home

UPDATE 1:
Once I removed Authorization:Bearer VtQJqaTGd7YFb8Mee6GfiLwiRrUdt2iCp9ITuiUE header, it stopped making multiple preflight request.
But removing this header will break oauth implementation. I still have to prevent multiple preflight request without removing custom header. How do I do it ?
UPDATE 2:
adding Access-Control-Max-Age helped, Now its not sending preflight for same request. BUT for different requests (different urls) its sending multiple OPTIONS request.

like image 608
Rahul Prasad Avatar asked Jun 13 '14 14:06

Rahul Prasad


People also ask

Can you have multiple Access-Control allow origin?

More than one Access-Control-Allow-Origin header was sent by the server. This isn't allowed.

Why is options request sent?

The OPTIONS request method is sent by browsers to find out the supported HTTP methods and other parameters supported for the target resource before sending the actual request. Browsers send OPTIONS requests when they send a CORS request to another origin.

How do I fix Access-Control allow Origin error?

Configure the CloudFront distribution's cache behavior to allow the OPTIONS method for HTTP requests. If you still see errors after updating your CORS policy and forwarding the appropriate headers, allow the OPTIONS HTTP method in your distribution's cache behavior.

What happens if Access-Control allow origin is not set?

So, What is This Error Then? This error occurs when a script on your website/web app attempts to make a request to a resource that isn't configured to accept requests coming from code that doesn't come from the same (sub)domain, thus violating the Same-Origin policy.


1 Answers

You can try adding a header like Access-Control-Max-Age to minimize repetitive OPTIONS requests. This will tell the browser to cache pre-flight info. See http://www.w3.org/TR/2008/WD-access-control-20080912/#access-control-max-age

like image 170
nullability Avatar answered Sep 28 '22 20:09

nullability