Web API 2 Cors Request Error

Question

I am trying to get CORS set up for a project I am working on with WebAPI 2. I started having issues, so I created a demo app directly from asp.net forums here . Everything was working correctly until I needed to use json as the content type. Then I started getting:

Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I understand with this content type sends preflight requests, but I am dumbfounded how I can get this to pass. Am I missing something? As soon as I remove the "contentType: 'application/json'" attribute from AJAX request, it works.

TestController.cs

[Authorize]
[EnableCors(origins: "*", headers: "*", methods: "*")]
public class TestController : ApiController
{
    // GET api/<controller>
    public HttpResponseMessage Get()
    {
        return new HttpResponseMessage()
        {
            Content = new StringContent("GET: Test message")
        };
    }

    public HttpResponseMessage Post([FromBody]string name)
    {
        return new HttpResponseMessage()
        {
            Content = new StringContent("POST: Test message")
        };
    }

    public HttpResponseMessage Put()
    {
        return new HttpResponseMessage()
        {
            Content = new StringContent("PUT: Test message")
        };
    }
}

WebApiConfig.cs

public static void Register(HttpConfiguration config)
    {
        // Web API configuration and services
        config.EnableCors();

        // Web API routes
        config.MapHttpAttributeRoutes();

        config.Routes.MapHttpRoute(
            name: "DefaultApi",
            routeTemplate: "api/{controller}/{id}",
            defaults: new { id = RouteParameter.Optional }
        );
    }

Ajax Request

$.ajax({
            type: "POST",
            url: 'http://localhost:17515/',
            data: JSON.stringify("Test"),
            xhrFields: {
                withCredentials: true
            },
            contentType: "application/json"
        });

Answer 1

It client will first send an OPTIONS request to the server. To this request, the server should add a header:

Access-Control-Allow-Origin: http://localhost:17822

This indicates that the API running on port 17515 accepts requests from the client served by port 17822.

You could try changing your attribute to:

[EnableCors(origins: "http://localhost:17822", headers: "*", methods: "*")]

We haven't had good experiences using EnableCors , so we handle OPTIONS requests using OWIN, simply returning 200 OK and manually adding the appropriate headers to all OPTIONS request sent by approved origins.

There is a good article on CORS on MSDN (likely you have already seen it): https://msdn.microsoft.com/en-us/magazine/dn532203.aspx

Answer 2

In your WebApiConfig.cs, you could try enabling the cors attributes there instead of on the controller.

        var cors = new EnableCorsAttribute("*", "*", "*");
        config.EnableCors(cors);

rather than just

        config.EnableCors();

This is working on a test project I have running at the moment.