Angularjs No 'Access-Control-Allow-Origin' header is present on the requested resource

Question

Im getting Error as:

Failed to load http://localhost:10948/Api/Home/PostData/[object%20Object]: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:57580' is therefore not allowed access. The response had HTTP status code 404.

Even i have Access-controll Orion File in my WebAPi(Global.asax.cs)File

 protected void Application_BeginRequest()
        {
            string[] allowedOrigin = new string[] { "http://localhost:57580", "http://localhost:11518" };
            var origin = HttpContext.Current.Request.Headers["Origin"];
            if (origin != null && allowedOrigin.Contains(origin))
            {
                HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", origin);
                HttpContext.Current.Response.AddHeader("Access-Control-Allow-Methods", "GET,POST");
            }

Angular.js

$scope.SubmitForm = function (isValied) {
        var EmployeeDetails = {
            'Empname': $scope.Emp.EmpName
        }
        if (isValied) {
       EmployeeFactoryService.SaveEmployeee(EmployeeDetails).then(function ()

            })
        }       
    }

Factory.Js

EmployeeFactoryServices.SaveEmployeee = function (Employee) {
    return $http({
        url: 'http://localhost:10948/Api/Home/PostData/'+ Employee,
        method: 'POST',
        ContentType: 'application/x-www-form-urlencoded', })

Possible duplicate of [Why does my JavaScript get a "No 'Access-Control-Allow-Origin' header is present on the requested resource" error when Postman does not?](https://stackoverflow.com/questions/20035101/why-does-my-javascript-get-a-no-access-control-allow-origin-header-is-present) — Rakesh Burbure, Nov 12 '17 at 10:59
You don't have to worry about the Origin header just set the header to all the allowed origin and the browser will handle the rest ;) — Mehdi Benmoha, Nov 12 '17 at 11:03
You also need to be sure to handle OPTIONS preflight requests in your routing — charlietfl, Nov 12 '17 at 13:29

score 1 · Accepted Answer · answered Nov 12 '17 at 13:45

Change the way you configure CORS as follows,

  HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", "*");
        if (HttpContext.Current.Request.HttpMethod == "OPTIONS")
        {
            //These headers are handling the "pre-flight" OPTIONS call sent by the browser
            HttpContext.Current.Response.AddHeader("Access-Control-Allow-Methods", "GET, OPTIONS");
            HttpContext.Current.Response.AddHeader("Access-Control-Allow-Headers", "Content-Type, Accept");
            HttpContext.Current.Response.AddHeader("Access-Control-Max-Age", "1728000");
            HttpContext.Current.Response.End();
        }

also the request should be,

 return $http({
        url: 'http://localhost:10948/Api/Home/PostData/'+ ,
        method: 'POST',
        data : Employee,
        ContentType: 'application/json' })

score 0 · Answer 2 · answered Nov 12 '17 at 09:09

0

There is a chrome extensions cors. Use it and you are good to go.

answered Nov 12 '17 at 09:09

Rahul Rana

455
2
7

score 0 · Answer 3 · answered Nov 12 '17 at 10:58

1- as I can see from your URL that the object you are trying to send didn't stringified so I recommend to stringify it using JSON.stringify(EmployeeDetails)

2- you'd better use Content-Type:application/json for your post requests.

3- you have to allow requests from your client side application into your backend code

4- you can overcome this temporarily via this extension

Angularjs No 'Access-Control-Allow-Origin' header is present on the requested resource

3 Answers3