AngularJS: No "Access-Control-Allow-Origin" header is present on the requested resource
Solution 1
This is a server side issue. You don't need to add any headers in angular for cors. You need to add header on the server side:
Access-Control-Allow-Headers: Content-Type
Access-Control-Allow-Methods: GET, POST, OPTIONS
Access-Control-Allow-Origin: *
First two answers here: How to enable CORS in AngularJs
Solution 2
CORS is Cross Origin Resource Sharing, you get this error if you are trying to access from one domain to another domain.
Try using JSONP. In your case, JSONP should work fine because it only uses the GET method.
Try something like this:
var url = "https://api.getevents.co/event?&lat=41.904196&lng=12.465974";
$http({
method: 'JSONP',
url: url
}).
success(function(status) {
//your code when success
}).
error(function(status) {
//your code when fails
});
Related videos on Youtube
Alessandro
I am a software developer graduated in Computer Science in Rome. I have a strong motivation and I am keen to learn new technologies. Things I love: Angular - Science - Technology - Traveling
Updated on July 09, 2020Comments
-
Alessandro almost 4 years
I'm writting my webApp and I'm using AngularJS. In this app I have created a file called script.js and I report this code:
var modulo = angular.module('progetto', ['ngRoute']); // configure our routes modulo.config(function ($routeProvider, $httpProvider) { $routeProvider // route for the home page .when('/', { templateUrl: 'listaFilm.html', controller: 'listaController' }) // route for the description page .when('/:phoneName', { templateUrl: 'description.html', controller: 'descriptionController' }); $httpProvider.defaults.headers.common['Access-Control-Allow-Origin'] = '*'; }); modulo.controller('listaController', function ($scope, $http) { $http.get('https://api.getevents.co/event?&lat=41.904196&lng=12.465974').success(function (data) { $scope.names = data; }). error(function (data, status) { $scope.names = "Request failed"; }); });
With this code I call API following RESTful principles. When I run the code i have this problem:
XMLHttpRequest cannot load https://api.getevents.co No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8383' is therefore not allowed access.
Reading on the web I understood that I have a problem called CORS...I have tried several solutions proposed but I didn't resolve the problem.
How can I fix the problem?
What's the code that I must add for fix it?-
apsillers about 9 years
https://api.getevents.co
needs to serve CORS headers in its responses. Do you control (or can you otherwise configure) the server athttps://api.getevents.co
? The server needs to change its behavior. -
charlietfl about 9 yearsnot all API's are accessible by ajax if they are not either CORS enabled or jsonp enabled. Check the API docs or use a proxy
-
Alessandro about 9 yearsI controll and this is the respose: Our API supports CORS (Cross Origin Resource Sharing), which means that it can be called straight from the browser using JavaScript, or more traditionally from the server using the back-end language of your choice.
-
Alessandro about 9 yearsI shoul set the $http header but I don't do it
-
AmirReza-Farahlagha over 4 yearsThis answer maybe useful: stackoverflow.com/a/58064366/7059557
-
-
Alessandro about 9 yearsHow and where i write this code in my code?
-
Kristjan Liiva about 9 yearsThat will depend on your server technology, I found a w3 link that has quite a good selection: w3.org/wiki/CORS_Enabled
-
Sion about 8 years
Access-Control-Allow-Origin: *
is what fixed my issue. For the record I had built a Go microservice,w.Header().Add("Access-Control-Allow-Origin", "*")
was the actual line that worked. -
Stan Sokolov over 7 yearsSuper. Thanks a lot!
-
Ritt over 7 yearsMy pleasure..!!!!
-
Junior Mayhé about 7 yearssince these success and error methods are not chainable they were removed from angular. We should use
.then()
stackoverflow.com/questions/35329384/… -
Travis Heeter about 7 years@Sion Cav you add your solution as an answer please? It would be nice to see how/where you did this.
-
Ananda G over 6 yearsthen what about for post, put, and delete??
-
Ritt over 6 yearsJSONP only supports GET
-
Maddy over 5 yearsThis things helps in the first place...!
-
Arpit Aggarwal over 4 yearsFor
Springboot
application, adding@CrossOrigin
in the rest controller worked for me.