Search code examples
angularjsgoogle-chromexmlhttprequestcorsrestangular

XMLHttpRequest cannot load? I am using already webserver


I am fetching a resource from wordnik api in my angular app using Restangular, I have searched this site for other answers to this problem, mainly the focus of the answers were on using a webserver instead of directly accessing the resource in browser but i am already using a server, using jetbeans IDE's built-in server, i also tried localhost on node then using gulp too, but the error still persist, here is my complete error to give you a better idea

XMLHttpRequest cannot load XMLHttpRequest cannot load http://api.wordnik.com:80/v4/word.json/dog/definations?api_key=a2a73e7b926c…f50eb4ae5&includeRelated=true&includeTags=false&limit=5&useCanonical=false. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

and here is my restangular code fetching the resource

var params = {
  limit: "5",
  includeRelated: "true",
  useCanonical:"false",
  includeTags:"false",
  api_key:apiKey
};
var encodedRecword = encodeURI(recword);
var service = WordnikRestangular.all(encodedRecword).all('definations');
service.get("", params).then(function(data) {

   //play with data

});

Solution

  • This is a CORS issue (Mozilla CORS), however i see two other potential problems:

    1. var service = WordnikRestangular.all(encodedRecword).all('definitions'); - it has to be "definitions" and not "definations"
    2. Skip the Port 80 on the URL - it's port 80 by default
    3. Try using https

    If that doesn't work try Angulars $http.jsonp to directly access the API (JSONp should be possible without CORS issues). If the problem persists, let me know.