jQuery AJAX CORS with ASP.NET WCF service not working despite web.config entries

Question

I'm trying to figure out what it is I'm missing in my approach that's preventing my WCF service from being accessed. If I try to access the service via an AJAX request from the same domain, there's no issue.

I've taken the advice I've seen elsewhere on the site to add to the <httpProtocol> tag in the web.config in order to enable CORS, but it doesn't seem to be working (note the first few elements in customHeaders are there for different security reasons):

<location path="FooBar.svc">
    <system.webServer>
      <httpProtocol>
        <customHeaders>
          <add name="Access-Control-Request-Method" value="POST"/>
          <add name="Access-Control-Allow-Origin" value="*" />
          <add name="Access-Control-Allow-Headers" value="Content-Type, X-Requested-With, X-Custom-Header" />
        </customHeaders>
      </httpProtocol>
    </system.webServer>
  </location>

Despite this being in place, I still get an error (using IE Developer Tools) when trying to call the service from a separate page: "XMLHttpRequest for ... required Cross Origin Resource Sharing (CORS)"

My jQuery ajax call (Post) has values set for use with CORS, as well:

 crossDomain: true,
 xhrFields: { withCredentials: true },

I've even tried adding a fix for potential IE XDR issues, from https://github.com/jaubourg/ajaxHooks/blob/master/src/xdr.js, with no effect (I'm using IE11, so I wouldn't expect it)

Anyone have any ideas as to what might be going wrong here?

(EDIT: the service itself is set up with these Attributes, if it makes a difference:

[OperationContract]
[WebInvoke(Method = "POST", 
        BodyStyle = WebMessageBodyStyle.WrappedRequest,
        ResponseFormat = WebMessageFormat.Json)]

)

(EDIT 2: In case it's meaningful, the service has to be part of an all-HTTPS site which uses Forms Authentication - and the service needs to use the same login credentials as the site. )

Answer 1

Enabling CORS to true in backend server where service is hosted should ideally solve the problem. However there is one more way... You can have a wrapper in between jQuery code and WCF service ( Note: It's one of the approach you have to suggest in the team when you do not have the access to modify for example htaccess file in apache where we set the CORS to have access to other domain accessing our service). So the approach goes like this....

jQuery Code -> Wrapper (Webmethod in .NET) -> WCF service

jQuery code and Wrapper resides in the same domain. jQuery calls webmethod which in turn fire a call to respective WCF service method to get the data. The downfall of this approach is that the request traverse through one more layer, the reason why I have mentioned Note in the beginning.

Answer 2

Your <customHeaders> web.config section is set up for CORS requests without credentials. You need a different configuration to allow CORS requests with credentials:

1. Set an additional Access-Control-Allow-Credentials header to true.

2. Access-Control-Allow-Origin header cannot be set to *. You have to return a case-sensitive match for the CORS request origin/host.

Source: 7.2 Resource Sharing Check (W3C Recommendation for Cross-Origin Resource Sharing)

Answer 3

If your service is on HTTPS and if you are using self signed SSL Certificate then Cross Domain calls will Fail despite web.config setting done for Access-Control-Allow-Origin header. You should try importing Valid SSL Certificate into your IIS and see what you get.