CORS Enabled On WebAPI, Chrome and FF still dont work

Question

I have enabled CORS on webApi

var corsAttr = new EnableCorsAttribute("http://localhost:14054", "*", "*") {SupportsCredentials = true};
            config.EnableCors(corsAttr);

but when I my web project it from FF i still get the error

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:28821/Authenticate. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).1(unknown)

and this is what i get in chrome

XMLHttpRequest cannot load http://localhost:28821/Authenticate. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:14054' is therefore not allowed access.

when do the same thing in Edge or IE it works. I have done a bunch of reading but cant figure out how to stop the pre-flight to stop, but i think i read somewhere chrome & FF also include port numbers.

Either way I am aggravated and annoyed, can somebody tell me what I am doing wrong.

EDIT The other thing is this is public endpoint that I have published and been able to use the mobile app to consume the api just fine. this was before i started working on the web application.

EDIT

<httpProtocol>
  <customHeaders>
    <add name="Access-Control-Allow-Origin" value="*" />
    <add name="Access-Control-Allow-Methods" value="GET, POST, OPTIONS, PUT, DELETE, PATCH" />
    <add name="Access-Control-Allow-Headers" value="authorization,accept,content-type,origin,cache-control,x-requested-with" />
    <add name="Access-Control-Expose-Headers" value="x-sf3-api-version" />
  </customHeaders>
</httpProtocol>

Thats the web config, and the above the enablecors() in the startup.register()

its not the OAuth or authentication logic cause it works from postman and works from mobile

I also experienced this kind of issue, what authentication you choosed on creating your webapi project? — jomsk1e, Oct 03 '16 at 13:49
and please show us the apicontroller you are using and your WebApiConfig. — jomsk1e, Oct 03 '16 at 14:12
right now im trying to authenticate, so goes directly to the my oath logic. — ChampChris, Oct 03 '16 at 20:30
Perhaps this has something to do with how you implemented your auth — Benjamin Soulier, Oct 04 '16 at 06:08
agree with bsoulier, you need to show us your myoath logic, also your webapiconfig and the apicontroller for us to be able to help. — jomsk1e, Oct 04 '16 at 10:11

score 1 · Answer 1 · answered Jun 09 '20 at 12:18

We experienced a similar issue in our own project when calling a REST endpoint protected by NTLM via AJAX - Chrome was reporting a CORS error but IE/Edge worked fine.

Here are a few pointers that may help to get to the bottom of it.

I suggest downloading Telerik Fiddler which will let you see the requests and responses going over the wire. In our case the Web API was actually returning a valid response with a HTTP 200 response so it was clear that Chrome was subsequently deciding to block it as untrusted. In our case, we had missed the {SupportsCredentials = true} part that you do have when setting up the server side.

However after fixing that (and it starting to work via a jQuery call where we used xhrFields: { withCredentials: true } ) we noticed that in a React app where we were using fetch, and not passing credentials through, we were getting a 401/403. Adding { credentials: 'include' } then allowed that call to work as well.

Hope this helps someone as it stumped us for quite a while.

score 0 · Answer 2 · edited May 23 '17 at 11:48

Looking at EnableCorsAttribute method, the first attribute is the address which are allowed to query your site.

As you're asaying it workd in IE, this shoulb be because the page accessing it is on another address than http://localhost:14054.

Your code should look like this to enable it:

var corsAttr = new EnableCorsAttribute("*", "*", "*") {SupportsCredentials = true};
        config.EnableCors(corsAttr);

or looking at ASP.NET documentation (on controller or method):

[EnableCors(origins: "", headers: "", methods: "*")]

public class TestController : ApiController
{
    // Controller methods not shown...
}

EDIT:

Check one other answer I did here, could be that you method implmentation is crashing (perhaps of your credential logic, which means it is not a CORS issue), which does not make the API return the Access-Control-Allow-Origin header

yeah i tried the wild card * for the origin and that didnt work either. — ChampChris, Oct 03 '16 at 20:29

CORS Enabled On WebAPI, Chrome and FF still dont work

2 Answers2