CORS POST Requests not working - OPTIONS (Bad Requ

问题:

I'm having a lot of trouble getting a cross domain POST request to hit an Api controller in the latest beta 2 release.

Chrome (and other browsers) spit out:

OPTIONS http://api.hybridwebapp.com/api/values 400 (Bad Request)
POST http://api.hybridwebapp.com/api/values 404 (Not Found) 

It may be related to this issue but I have applied that workaround and several other fixes such as web.config additions here

I've been banging my head with this for a while so I created a solution to reproduce the problem exactly.

Load the web app there will be 2 buttons one for GET one for POST and the response will appear next to the button. GET works. Cannot get POST to return successfully.

I'm able to get a hint at the cause from Fiddler but it makes no sense because if you look at the response it DOES include the domain in the Access-Controll-Allow-Origin header:

There is a folder in the solution called "ConfigurationScreenshots" with a few screenshots of the IIS configuration (website bindings) and Project properties configurations to make it as easy as possible to help me :)

EDIT: Don't forget to add this entry to host file (%SystemRoot%\system32\drivers\etc):

 127.0.0.1     hybridwebapp.com  api.hybridwebapp.com

**STATUS: ** It seems that some browsers like Chrome allow me to proceed with the POST regardless of the error message in the OPTIONS response (while others like Firefox don't). But I don't consider that solved.

Look at the Fidler screenshots of the OPTIONS request it has

Access-Control-Allow-Origin: http://hybridwebapp.com

And yet the error:

The origin http://hybridwebapp.com is not allowed

That is completely contradictory it's as if it's ignoring the header.

回答1:

Ok I got past this. This has got to be the strangest issue I've ever encountered. Here's how to "solve" it:

1. Continue on with life as usual until suddenly out of no where OPTIONS requests to this domain begin returning 200 OK (instead of 400 Bad Request) and POST never happens (or at least seems like it doesn't because the browser swallows it)
2. Realize that Fiddler's OPTIONS response mysteriously contains duplicates for "Access-Control-Allow-XXX".
3. Try removing the following statement from you web.config even though you clearly remember trying that to fix the previous issue and it not working:

Remove this:

    <httpProtocol>
       <customHeaders>
         <remove name="X-Powered-By" />
         <add name="Access-Control-Allow-Origin" value="http://mydomain.com" />
         <add name="Access-Control-Allow-Headers" value="Accept, Content-Type, Origin" />
         <add name="Access-Control-Allow-Methods" value="GET, PUT, POST, DELETE, OPTIONS" />
       </customHeaders>
    </httpProtocol>

Because you already have this:

 var enableCorsAttribute = new EnableCorsAttribute("http://mydomain.com",
                                                   "Origin, Content-Type, Accept",
                                                   "GET, PUT, POST, DELETE, OPTIONS");
        config.EnableCors(enableCorsAttribute);

Moral: You only need one.

回答2:

if you use OAuth Authorization . request not go direct to web api. You need to enable OWIN CORS support for that endpoint.

How i do on my site: Install owin cors

Install-Package Microsoft.Owin.Cors

Note: please not use : Install-Package Microsoft.AspNet.WebApi.Cors

In file Startup.Auth.cs

 //add this line
            app.UseCors(Microsoft.Owin.Cors.CorsOptions.AllowAll);

            // Enable the application to use bearer tokens to authenticate users
            app.UseOAuthBearerTokens(OAuthOptions);

回答3:

Try to add below code in your Response header:

Response.AddHeader("Access-Control-Allow-Origin", "*");

回答4:

I have an MVC controller (not an ApiController) but the solution I came up with may help others. To allow cross domain access to a POST action (/data/xlsx) on the controller I implemented 2 actions:

1. for the pre-flight check
2. for the post

If you don't have the HttpOptions action then you get 404's on the pre-flight check.

Code:

[HttpOptions]
public ActionResult Xlsx()
{
    // Catches and authorises pre-flight requests for /data/xlsx from remote domains
    Response.AddHeader("Access-Control-Allow-Origin", "*");
    Response.AddHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    Response.AddHeader("Access-Control-Allow-Methods", "GET, PUT, POST, DELETE, OPTIONS");
    return null;
}

[HttpPost]
public ActionResult Xlsx(string data, string name)
{
    Xlsx(); // Add CORS headers

    /* ... implementation here ... */
}

I've tested it in IE 11, Chrome, FireFox.

回答5:

Add this to your startup.cs file inside ConfigureOAuth

app.UseCors(Microsoft.Owin.Cors.CorsOptions.AllowAll);