This is what i'm trying to do:

function fetch() {
              $http.get("")
                .success(function(response) {
                    console.log(response);
                  $scope.details = response;
                });
            };

The error i'm receiving is the following:

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

I've looked up quite a bit on this issue or CORS but still can't seem to realize what i have to add and in which file(s).

This is what i'm trying to do:

function fetch() {
              $http.get("http://www.myapifilms./imdb/top")
                .success(function(response) {
                    console.log(response);
                  $scope.details = response;
                });
            };

The error i'm receiving is the following:

XMLHttpRequest cannot load http://www.myapifilms./imdb/top. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.

I've looked up quite a bit on this issue or CORS but still can't seem to realize what i have to add and in which file(s).

• javascript
• angularjs
• cors

Share Improve this question Follow asked Dec 9, 2015 at 22:06 TempuslightTempuslight 1,22344 gold badges2020 silver badges4141 bronze badges 2

• Use JSONP in this case. – dfsq Commented Dec 9, 2015 at 22:11
• I've tried the following: function fetch() { $http.jsonp("http://www.myapifilms./imdb/top") .success(function(response) { $scope.details = response; console.log(response); console.log(details); }); }; But can't seem to get a console log going and details isn't getting filled up? – Tempuslight Commented Dec 9, 2015 at 23:11

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

This means that http://www.myapifilms. does not allow "localhost" origin to access its data.

I could remend two solutions:

• try using http-server by running npm install -g http-server

• download a chrome plugin(not remended) but can be handy for testing https://chrome.google./webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?utm_source=chrome-app-launcher-info-dialog

For this request to succeed, the response from myapifilms. would need the correct headers set. What you should do is route your request through a server of your own. However you could get around it for testing purposes with a browser extension

Explained in detail here.

use this plugin: https://chrome.google./webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en

//make headers for service
let headers = new Headers();
headers.append('Content-Type', 'application/json');
headers.append('appCurrentVersionNumber', AppConstant.APP_VERSION);
headers.append('WebServiceIdentifier', AppStorage.getItem('webserviceidentifier'));
this.headers = {headers}; this.http.post(API_URL + 'checkInVan', JSON.stringify(userData), this.headers).map(res => res.json());