I will skip the introduction to setting up the Cross-Origin Requests in ASP.NET Web API 2 here.
For more information about the CORS for Web Api. you can visit MSDN link
Enabling Cross-Origin Requests in ASP.NET Web API 2
i will only focus on the a little bit advance topic on CORS implementation, since i had spend
extend period of time to complete the implementation.
1. control the CORS with custom setting in web.config file.
the configuration setting will allow us to add more domains without any code change and depolyment, we only need system admin to add more domain in the name attribute that separate by
comma.
<configSections>
<section name="CORSSettings" type="MyApp.CORSSettings, MyApp" />
</configSections>
<CORSSettings>
<CorsSupport>
<Domain Name="http://firstdomain,http://seconddomain,http://thirddomain" AllowMethods="*" AllowHeaders="*" AllowCredentials="true">
</Domain>
</CorsSupport>
</CORSSettings>
2. Server Side Implementation
In the WebApiConfig class
added the following code to enable the CORS globally
var cORSSettings = ConfigurationManager.GetSection("CORSSettings") as CORSSettings;
if (cORSSettings == null)
throw new InvalidOperationException("Missing CORS configuration");
var domains = cORSSettings.CorsSupport.OfType<CorsDomain>();
foreach (var domain in domains)
{
var cors = new EnableCorsAttribute(domain.Name, domain.AllowHeaders, domain.AllowMethods);
cors.SupportsCredentials = true;
config.EnableCors(cors);
}
please ensure the CORS object with property SupportsCredentials to be True, if your web api is configured with windows authentication and disable anonymous access. otherwise you will always receive XMLHttpRequest Network Error
3. Client Side Implementation
Even though you have enable the cors with SupportCredentials, you still will encouter the PreFlight request OPTIONS Error like
"Origin http://YourDomain is not allowed by Access-Control-Allow-Origin"
when you use .ajax the jquery wrappper to execute the client call
$.ajax({
type: 'get',
url: 'http://www.example.com/api/test',
xhrFields: {
withCredentials: true
}
actually we should use this XMLHttpRequest directly to call the web api to solve the preFlight request OPTIONS Error
var xmlHttpRequest = new XMLHttpRequest();
xmlHttpRequest.open('GET', sWCFUrl, true);
xmlHttpRequest.withCredentials = true;
xmlHttpRequest.onreadystatechange = processData;
xmlHttpRequest.send();
I hope this post can help solve the headache on CORS implementation especiallly with windows authentication eanble and anonymous access diable.
