Angularjs: No "Access-Control-Allow-Origin" Header Is Present on the Requested Resource

How to fix No 'Access-Control-Allow-Origin' header on angular 1 + ajax + CORS policy?

Your are getting this error because you are calling the API which is located in a different domain, and this is what CORS (Cross Origin Resource Sharing) policy prevents unless you allow accessing your API from another domaines.

You can solve this error by installing a package in your backend (laravel-cors if you are working with laravel) it depends on the technology you are using.

have a look at this issues, they will help you understanding and fixing the problem

AngularJS performs an OPTIONS HTTP request for a cross-origin resource

CORS: Cannot use wildcard in Access-Control-Allow-Origin when credentials flag is true

No 'Access-Control-Allow-Origin' header is present on the requested resource with Spring Boot and Angular JS

You should add a @CrossOrigin annotation to your RestController, like so:

@RestController
@CrossOrigin("*")
public class MessagesController {

This will enable CORS requests from all hosts (*). You might want to restrict it so specific hosts only, e.g. @CrossOrigin(origins="http://angularjs:8080")

Background: If your AngularJS app is asking your browser to send a request to a host:port that is different from the one that serves the AngularJS app (say angularjs:8080), the browser will first ask the host:port if it allows CORS from angularjs:8080. If, as in your case, the HTTP response of your RestController does not contain the appropriate CORS headers, the browser will reject the request made by your app.

This is explained nicely in this Spring Getting Started guide: https://spring.io/guides/gs/rest-service-cors/

AngularJS No 'Access-Control-Allow-Origin' header

This means that your http://thirdparty.url.com/
Does not accept requests from external sources that is/are not from http://thirdparty.url.com/, so you have to enable it from your thirdparty.url.com

AngularJS : No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access

I got the answer of this question posted by me and its working fine now.

we have to use JSONP to prevent the cross origin policy.

Code :

var url = "http://hostname:8080/abc/test?callback=JSON_CALLBACK";

$http.jsonp(url)
.success(function(data){
console.log(data);
});

how to resolve No 'Access-Control-Allow-Origin' header is present on the requested resource

You can try below plugin in chrome browser:
Core extension

And if you want to add on server side then on server you can add below headers (for PHP add this in index.php)

header("Access-Control-Allow-Origin:*");
header('Access-Control-Allow-Methods: GET, POST, OPTIONS, DELETE, PUT');
header('Access-Control-Allow-Headers: Origin, Content-Type, Accept, Authorization, X-Request-With, X-CLIENT-ID, X-CLIENT-SECRET');
header('Access-Control-Allow-Credentials: true');

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access

Use this bundle: NelmioCorsBundle

The CORS-Bundle is used to define the CORS rules. This bundle allows you to define which domains will have access to your REST API. And it will make your job easier too :)

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

A cross-origin error is raised by browsers when one web page that's under a different domain tries to access the resources of a different domain.

If the requester is not a browser, CORS is not applicable.
So you can set up a proxy server in between. Check this question's edit section: How to enable CORS in AngularJs

Normally, proxies shouldn't be used in real applications in production, but as far as I understand, what you are trying to achieve is CI/CD integration for your development workflow. So it should be fine.

You can also google how you can set a proxy for AngularJS in NodeJS environment.

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

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' })


Related Topics



Leave a reply



Submit