How to enable CORS in angular js

Question

I am having a controller.js

ListNewsCtrl.$inject = ['$http', '$scope', 'datacontext'];
function ListNewsCtrl( $http, $scope, datacontext) {
    $scope.names = [];
    $http.get("http://www.w3schools.com/website/Customers_JSON.php")
                .success(function (response) {$scope.names = response;console.log($scope.names)});
};

I get the data that I want. But when I change to a different site I get the followinf msg :

XMLHttpRequest cannot load https://URL. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3424' is therefore not allowed access. The response had HTTP status code 404.

The information I am trying to access are not requiring access token ?

“The information I am trying to access are not requiring access token ?” – who said anything about access tokens? The error message certainly didn’t. — C3roe
– C3roe, Commented Mar 25, 2015 at 18:44
If you look at the error message, you're getting a 404 error from the server. You're requesting a URL that doesn't exist, getting a 404, and their 404 response doesn't provide the cross-site request headers. — Justin Niessner
– Justin Niessner, Commented Mar 25, 2015 at 19:02
erikberg.com/mlb/standings.json I want to get the data from this link. When I click I get the data — Besa
– Besa, Commented Mar 25, 2015 at 19:16

Besa · Accepted Answer · 2015-03-25 20:33:54Z

1

The solution to my answer would be this :

http://blog.novanet.no/angularjs-with-jsonp-and-how-i-get-to-work-on-time/#2

However,I get this error : Uncaught SyntaxError: Unexpected token : I get small syntax issues . But at least I can see my data

answered Mar 25, 2015 at 20:33

Besa

5151 gold badge8 silver badges19 bronze badges

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

Comments

Aweary · Accepted Answer · 2015-03-25 18:41:23Z

0

CORS is enabled server-side. The domain you're requesting does not allow CORS requests, and that is not something you can edit or configure on the client end.

If the domain does allow CORS, then whatever you're using to host your local web server on localhost is not allowing it.

answered Mar 25, 2015 at 18:41

Aweary

2,31219 silver badges26 bronze badges

6 Comments

Besa Over a year ago

But when I try from my local host to access this : "http://www.w3schools.com/website/Customers_JSON.php" I get the data.

Aweary Over a year ago

Then the domain you're requesting does not allow CORS.

Besa Over a year ago

Can I access the web api through smth else and not angularjs

Aweary Over a year ago

$http uses XMLHttpRequest which essentially all AJAX utilities use. If it's failing this way in Angular, it's going to fail with any other AJAX request. Assuming there's not something else wrong with your code.

Besa Over a year ago

I believe that the website des not allow CORS. But as I see in their website people actually have access on the data. That is why I am confused. Can you please check this out : erikberg.com/api and tell me what you think

|

Tharin Meggett II · Accepted Answer · 2015-03-25 18:47:15Z

0

If cross-site requests are allowed, try

$http.jsonp("http://www.w3schools.com/website/Customers_JSON.php")
    .success(function(data){
        console.log(data);
});

answered Mar 25, 2015 at 18:47

Tharin Meggett II

864 bronze badges

2 Comments

Besa Over a year ago

$http.jsonp - I get an error I guess its because of jsonp: [$injector:modulerr] Failed to instantiate module app due to:

Tharin Meggett II Over a year ago

jsonp (JSON with padding) is what you'd use for cross-domain requests; but their servers have to allow it in order for it to work. It's annoying business, but if you want a work around that will allow you to practice AJAX requests, you can save the customer JSON data as a JSON file, then perform the call locally. You'd have to use Firefox since Chrome doesn't like local AJAX requests at all.

Zeeshan Hassan Memon · Accepted Answer · 2015-03-25 19:26:58Z

0

I would not say its a perfect approach but better workaround for cors.

The Yahoo! Query Language is an expressive SQL-like language that lets you query, filter, and join data across Web services. Great thing about Yahoo YQL is that it is CORS-enabled :)

Client -> YQL -> API Server

Run Sample Here

$.getJSON("http://query.yahooapis.com/v1/public/yql",
  {
    q:      "select * from json where url=\"https://erikberg.com/mlb/standings.json\"",
    format: "json"
  },
  function (data) {
    if (data.query.results) {
      alert(data.query.results.json.standing);
    } else {
      alert('no such code: ' + code);
    }
  }
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Here is a cool Tutorial

This will at least solve your cors problem in different ways.

Happy Helping!

edited Mar 25, 2015 at 19:26

answered Mar 25, 2015 at 19:11

Zeeshan Hassan Memon

8,3654 gold badges47 silver badges60 bronze badges

2 Comments

Zeeshan Hassan Memon Over a year ago

@Besa I just added sample runable code in my answer try this, this is how yql works, its working on the api you are trying to hit.

Zeeshan Hassan Memon Over a year ago

why -ve 2 points on this, I tried to answer best with better explanation accompanied by Running Demo and Tutorial. Still someone dislikes-- strange!

Collectives™ on Stack Overflow

How to enable CORS in angular js

4 Answers 4

Comments

6 Comments

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

6 Comments

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related