There have been many questions regarding this topic. I tried following their answers/solutions, but I seem to be missing something here.
I have the backend as .NET Web Api, with the following in its web.config file:
<httpProtocol>
<customHeaders>
<add name="Access-Control-Allow-Origin" value="*" />
<add name="Access-Control-Allow-Methods" value="GET, POST, PUT, OPTIONS"/>
<add name="Access-Control-Allow-Headers" value="authorization,content-type,X-Requested-With,accept,Origin,Access-Control-Request-Method,Access-Control-Request-Headers,access-control-allow-origin"/>
</customHeaders>
</httpProtocol>
In frontend, I am making a POST request with JSON body content, like this:
$http({
method: 'POST',
url: options.url,
headers: { 'Content-Type': 'application/json', 'Authorization': 'Basic ' + basicAuth },
data: dataObj
});
In Fiddler, the OPTIONS request looks like this:
OPTIONS http://localhost:44302/my/url HTTP/1.1
Host: localhost:44302
Connection: keep-alive
Access-Control-Request-Method: POST
Origin: http://127.0.0.1:9000
User-Agent: Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/44.0.2403.107 Safari/537.36
Access-Control-Request-Headers: accept, authorization, content-type
Accept: */*
Referer: http://127.0.0.1:9000/
Accept-Encoding: gzip, deflate, sdch
Accept-Language: en-US,en;q=0.8
And this is the response:
HTTP/1.1 400 Bad Request
Cache-Control: private
Content-Type: text/html
Server: Microsoft-IIS/8.0
WWW-Authenticate: Basic realm="MyServices"
X-AspNet-Version: 4.0.30319
X-SourceFiles: =?UTF-8?B?blah blah
X-Powered-By: ASP.NET
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, PUT, OPTIONS
Access-Control-Allow-Headers: authorization,content-type,X-Requested-With,accept,Origin,Access-Control-Request-Method,Access-Control-Request-Headers,access-control-allow-origin
Date: Tue, 18 Aug 2015 19:48:46 GMT
Content-Length: 2192
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Request Error</title>
</head>
<body>
<div id="content">
<p class="heading1">Request Error</p>
<p xmlns="">The server encountered an error processing the request. Please see the blah blah,and a useless call stack</p>
</div>
</body>
</html>
The server response includes the allow-origin: *. It also includes the allow-methods and allow-headers requested in the OPTIONS request. Is there another requirement for the server to respond positively to the OPTIONS request? What else am I missing?