How to implement CORS in ASP.NET Web API 2.0

Question

User171227042 posted

I have been trying to implement CORS in ASP.NET , I have been trying for a whole day , followed many tutorials but it's not working at all. I am trying to recieve the get request and print it on the web page. What am i missing?  and access control allow origin not showing in response header. here is my code

    

[EnableCors(origins: "http://auto-parts.azurewebsites.net/", headers: "*", methods: "*")]
    public class ProductListController : ApiController
    {
        
        public List<Product> Get()
        {
            string connectionString = "Server=tcp:autopartserver.database.windows.net,1433;Database=Autoparts;User ID=adarshjaya12@autopartserver;Password=Ad9940114541;Encrypt=True;TrustServerCertificate=False;Connection Timeout=30";
            string command = "Select * from products";
            SqlDataReader productDataReader;
            Product product;
            List<Product> productList;
            using (SqlConnection conn = new SqlConnection(connectionString))
            {
                SqlCommand cmd = new SqlCommand(command, conn);
                conn.Open();
                productDataReader = cmd.ExecuteReader();
                productList = new List<Product>();
                if (productDataReader.HasRows)
                {
                    while (productDataReader.Read())
                    {
                        product = new Product();
                        product.PID = Convert.ToInt16(productDataReader["Pid"]);
                        product.ProductName = productDataReader["ProductName"].ToString();
                        product.ProductManufacture = productDataReader["ProductManufacture"].ToString();
                        product.ProductPrice = Convert.ToDouble(productDataReader["ProductPrice"]);
                        product.ProductLocation = productDataReader["ProductLocation"].ToString();
                        product.ProductImage = productDataReader["ProductImage"].ToString();
                        product.ProductDescription = productDataReader["ProductDescription"].ToString();
                        productList.Add(product);
                    }
                    return productList;
               } 
            }
            return null;
        }
    }

 

WebAPI Config

var cors = new EnableCorsAttribute("*", "*", "*");
            config.EnableCors(cors);
            // Web API configuration and services
            //config.Formatters.JsonFormatter.SupportedMediaTypes.Add(new MediaTypeHeaderValue("text/json"));
            config.Routes.MapHttpRoute(
                name: "DefaultApi",
                routeTemplate: "api/{controller}/{id}",
                defaults: new { id = RouteParameter.Optional }
            );
            var appXmlType = config.Formatters.XmlFormatter.SupportedMediaTypes.FirstOrDefault(t => t.MediaType == "application/xml");
            config.Formatters.XmlFormatter.SupportedMediaTypes.Remove(appXmlType);

aspx

 

    <div>
         <p id="displayText"></p>
         <button name="button" onclick="onChange">Hello</button>
    </div>
    </form>
    <script>
              
        function onChange()
        {
            var displayText =  document.getElementById("displayText");

            if ("withCredentials" in xhr) {
                var userName = document.getElementById("TextBox1").value;
                xhr.open('GET', 'http://autopart20160514124007.azurewebsites.net/api/ProductList/', true);
                xhr.onreadystatechange = function () {
                    if (xhr.readyState === 4) {
                        if (xhr.status == 200)
                            displayText.innerHTML = xhr.responseText;
                        else
                            alert("Not working");
                        }
                        else {
                            alert("Oops");
                        }
                    }
                };
                xhr.send();
            }
      
       

    </script>

 

Answer 1

User36583972 posted

Hi adarshjaya13

Browser security prevents a web page from making AJAX requests to another domain. You can enable Cross-Origin Requests in your Web API application. You can refer the following tutorials.

1: Enabling Cross-Origin Requests in ASP.NET Web API 2:

http://www.asp.net/web-api/overview/security/enabling-cross-origin-requests-in-web-api

2: How to use CORS with ASP.NET Web API 2.0:

http://tostring.it/2014/03/04/how-to-use-CORS-with-ASPNET-WebAPI-2/

You could also share us more relevant code and an error message to help us reproduce the problem.

Best Regards,

Yohann Lu

Answer 2

User-1636183269 posted

I assume you are using IIS 7. Please set in web.config.

<?xml version="1.0" encoding="utf-8"?>
<configuration>
 <system.webServer>
   <httpProtocol>
     <customHeaders>
       <add name="Access-Control-Allow-Origin" value="*" />
     </customHeaders>
   </httpProtocol>
 </system.webServer>
</configuration>

Answer 3

User-1596463 posted

since you are specified

[EnableCors(origins: "http://auto-parts.azurewebsites.net/", headers: "*", methods: "*")]

That means, you can access this api on the page domain "http://auto-parts.azurewebsites.net/".

If you want to access from any cross domain then put it as

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