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

Question

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.

Answer 1

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

Answer 2

The preflight is being triggered by your Content-Type of "application/json". The simplest way to prevent this is to set the Content-Type to be "text/plain" in your case. application/x-www-form-urlencoded Content-Types are also acceptable, but you'll of course need to format your request payload appropriately.

If you are still seeing a preflight after making this change, then Angular may be adding an X-header to the request as well.