9703. Cross Domain Access for RESTful Web Services
CORS and ASP.NET WebAPI

Access RESTful web services for web client which is deployed on another web server.

1. Background

I’m building a web application with ReactJS. The client calls RESTful web services built with ASP.NET WebAPI to fetch data. This client website(ReactJS) and the backend RESTful services are deployed on different servers. One issue is the client side fails to get the JSON data from the RESTful services. Similar issue can be found on stackoverflow.

2. Cause and Solution

The failure is due to cross domain requests are not allowed under the browser’s same origin policy for security concerns. After doing a Google search, I found Cross-Origin Resource Sharing(CORS) is the solution for such issue. Here are the two articles describe how to use CORS.

The key is to add ‘Access-Control-Allow-Origin’ attribute to the http request header.

header("Access-Control-Allow-Origin: *"); // for php
Response.AppendHeader("Access-Control-Allow-Origin", "*") // for asp.net

3. Solution for Angular with PHP

In Angular, add a whitelist of legal files and/or domains in the config function of application, Sample from w3schools.

$sceDelegateProvider.resourceUrlWhitelist([
    'https://tryit.w3schools.com/**'
]);

Meanwhile, for the backend, like php, add ‘Access-Control-Allow-Origin’ to header.

<?php
header("Access-Control-Allow-Origin: *");
?>

4. Solution for ReactJS with ASP.NET

For ASP.NET Web API, add ‘EnableCors’ attribute to the controller.

[EnableCors(origins: "http://localhost:3366, http://localhost:3000", headers: "*", methods: "*", SupportsCredentials = true)]
public class VideoController : ApiController
{
}

In ReactJS, since I’m using superagent to send out http requests, just need to add ‘withCredentials()’ to the request header.

request
      .get(url)
      .withCredentials()
      .end(function (err, res) { ... }

The above approach is mentioned in superagent’s official document , search for ‘CORS’.