Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Amandeep Dindral
8,915 PointsNo 'Access-Control-Allow-Origin' header is present on the requested resource. Console error.
Hi,
I am building an application in Angular using the indeed.com API. I am getting the following console error when calling to the API.
MLHttpRequest cannot load http://api.indeed.com/ads/apisearch?publisher=3997996753290215&q=java&l=aus…ong=1&co=us&chnl=&userip=1.2.3.4&useragent=Mozilla/%2F4.0%28Firefox%29&v=2. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.
Here is my code
controllers.controller('JobsCtrl', function($scope, $http){
$http({
method: 'GET',
url: 'http://api.indeed.com/ads/apisearch?publisher=3997996753290215&q=java&l=austin%2C+tx&sort=&radius=&st=&jt=&start=&limit=&fromage=&filter=&latlong=1&co=us&chnl=&userip=1.2.3.4&useragent=Mozilla/%2F4.0%28Firefox%29&v=2',
}).then(function (data) {
console.log(data);
});
});
Does any one know the fix ?
2 Answers
Joedy Felts
3,981 PointsIt'll be hard to be exactly sure the issue, but a few things that could be going wrong here:
When you view the api url in a browser, are you getting any valid data back? When I viewed the url I got an error saying the publisher number was invalid.
When making a json request, you'll need to add "callback=JSON_CALLBACK" to the end of the url. That tells Angular to return the data as pure json.
When making a request for data with javascript, you usually want to use a php proxy file to make the request. It's a much better way of making data requests and you'll have more options for formatting the returned results. Just Google "php proxy script" and you'll get a bunch of examples.
You could also use try another (public) data source just to make sure you're script is working correctly. The site http://www.jsontest.com/ is one example.
Joedy Felts
3,981 PointsYou will not be able to make a 'GET' request to another site without modifying the server configuration where the data lives. Using JSON instead of GET in your $http request will get you around this issue.
Amandeep Dindral
8,915 PointsLindsey King Hi. Thank you for the response. So when I add JSON instead of GET I get the following error. Ive tried replacing GET with JSON and JSONP before and I still get the same thing.
Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.
controllers.controller('JobsCtrl', function($scope, $http){
$http({
method: 'JSON',
url: 'http://api.indeed.com/ads/apisearch?publisher=3997996753290215&q=java&l=austin%2C+tx&sort=&radius=&st=&jt=&start=&limit=&fromage=&filter=&latlong=1&co=us&chnl=&userip=1.2.3.4&useragent=Mozilla/%2F4.0%28Firefox%29&v=2',
}).then(function (data) {
console.log(data);
});
});