AngularJS: No "Access-Control-Allow-Origin" header is present on the requested resource [duplicate]

Question

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?

https://api.getevents.co needs to serve CORS headers in its responses. Do you control (or can you otherwise configure) the server at https://api.getevents.co? The server needs to change its behavior. — apsillers
– apsillers, Commented Apr 9, 2015 at 19:20
not 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 — charlietfl
– charlietfl, Commented Apr 9, 2015 at 19:24
I 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
– Alessandro, Commented Apr 9, 2015 at 19:48
This answer maybe useful: stackoverflow.com/a/58064366/7059557 — AmirReza-Farahlagha
– AmirReza-Farahlagha, Commented Sep 23, 2019 at 14:13

Community · Accepted Answer · 2017-05-23 12:03:08Z

65

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

edited May 23, 2017 at 12:03

CommunityBot

11 silver badge

answered Apr 9, 2015 at 20:57

Kristjan Liiva

9,6593 gold badges28 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Alessandro Over a year ago

How and where i write this code in my code?

Kristjan Liiva Over a year ago

That will depend on your server technology, I found a w3 link that has quite a good selection: w3.org/wiki/CORS_Enabled

Sion Over a year ago

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.

Travis Heeter Over a year ago

@Sion Cav you add your solution as an answer please? It would be nice to see how/where you did this.

Arpit Aggarwal Over a year ago

For Springboot application, adding @CrossOrigin in the rest controller worked for me.

Kabb5 · Accepted Answer · 2015-07-08 19:06:47Z

32

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

edited Jul 8, 2015 at 19:06

Kabb5

3,9003 gold badges36 silver badges57 bronze badges

answered Apr 9, 2015 at 20:11

Ritt

3,3693 gold badges27 silver badges55 bronze badges

5 Comments

Ritt Over a year ago

My pleasure..!!!!

Junior Mayhe Over a year ago

since these success and error methods are not chainable they were removed from angular. We should use .then() stackoverflow.com/questions/35329384/…

Ananda G Over a year ago

then what about for post, put, and delete??

Ritt Over a year ago

JSONP only supports GET

Maddy Over a year ago

This things helps in the first place...!

Collectives™ on Stack Overflow

AngularJS: No "Access-Control-Allow-Origin" header is present on the requested resource [duplicate]

2 Answers 2

5 Comments

5 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

5 Comments

Linked

Related