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
Should CSS Always Precede JavaScript
Fixed Positioning in Mobile Safari
Show Loading Image While $.Ajax Is Performed
Webkit-Based Blurry/Distorted Text Post-Animation Via Translate3D
Check Element CSS Display With JavaScript
Modifying CSS Class Property Values on the Fly With JavaScript/Jquery
Add Stylesheet to Head Using JavaScript in Body
Get a CSS Value from External Style Sheet With JavaScript/Jquery
How to Add Multiple Classes to a Reactjs Component
Disable Drag and Drop on HTML Elements
Combine and Minify Multiple Css/Js Files
Access CSS Variable from JavaScript
Typeerror: $(...).Datatable Is Not a Function
Get Computed Font Size For Dom Element in Js
Detect Change in Orientation Using JavaScript
How to Achieve Equal Height Divs (Positioned Side by Side) With HTML/CSS