Angularjs Error in loading external jsonfile from server

Question

I am trying to load json file from server .Here is my services.js file

angular.module('starter.services', [])

/**
 * A simple example service that returns some data.
 */
.factory('Friends', function($http) {

  var friends;
 //here is the code for server access
  $http.get('http://wwww.root5solutions.com/ionictest/get.json').then(function(msg){
      console.log("console output"+msg.data);
      friends=msg.data;
      console.log("from server"+friends.data);
  });

  return {
    all: function() {
      return friends;
    },
    get: function(friendId) {

      return friends[friendId];
    }
  }
});

But its not worked properly.Here is my console message

XMLHttpRequest cannot load http://www.root5solutions.com/ionictest/get.json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8100' is therefore not allowed access.

The server does not support CORS, see http://enable-cors.org/server.html on how to enable it. — ivarni, Sep 03 '14 at 05:02
I just added the following code to my js file,but didnt work `$http.defaults.headers.put = { 'Access-Control-Allow-Origin': '*' };` — shamon shamsudeen, Sep 03 '14 at 05:09
It's the server that decides if it wants to provide CORS support or not. There's nothing you can do in javascript to enable it. — ivarni, Sep 03 '14 at 05:12
I tried in localhost ,but didnt work.Is it possible that in localhost — shamon shamsudeen, Sep 03 '14 at 05:16

score 0 · Answer 1 · answered Sep 05 '14 at 05:50

you have to whitelist that URL

try this

.config(function($sceDelegateProvider) {

    $sceDelegateProvider.resourceUrlWhitelist([
        // Allow same origin resource loads.
        'self',
        // Allow loading from our other assets domain.  Note there is a difference between * and **.
        'http://wwww.root5solutions.com/ionictest/**',
    ]);
})

Archana · Accepted Answer · 2014-09-05T06:20:05.657

0

I have also faced the same problem.I am sure it will resolve your problem,

For Windows... create a Chrome shortcut on your desktop > Right-clic > properties > Shortcut > Edit "target" path : > "C:\Program Files\Google\Chrome\Application\chrome.exe" --args --disable-web-security

NOTE: After setting this exit from chrome and then open

edited Sep 05 '14 at 06:20

answered Sep 05 '14 at 06:09

Archana

387
1
5

http get working fine.But http post reutrns this error `Request header field Content-Type is not allowed by Access-Control-Allow-Headers. ` – shamon shamsudeen Sep 10 '14 at 03:32
1

Refer this http://stackoverflow.com/questions/25727306/request-header-field-access-control-allow-headers-is-not-allowed-by-access-contr and also check this http://www.wilsolutions.com.br/content/fix-request-header-field-content-type-not-allowed-access-control-allow-headers – Archana Sep 10 '14 at 11:05
Finally i figure out the problem,but never get a solution.Http get working fine ,post returns the same error. – shamon shamsudeen Sep 10 '14 at 14:47
Either my answer helped you or not? – Archana Sep 12 '14 at 04:43
Can you give an answer for this (http://stackoverflow.com/questions/25831459/pushnotifcation-in-phongap-android-multiple-registrion-ids-of-the-same-device) – shamon shamsudeen Sep 14 '14 at 14:24
Then can you please mark my answer as correct for your above question? So that the others can also make use this answer.... – Archana Sep 15 '14 at 05:05

score 0 · Answer 3 · answered Sep 14 '14 at 08:49

0

All this problem beacuse i tested only using browser.When tesing on device/emulator its working perfect.There is no need of additional coding to overcome this problem.

answered Sep 14 '14 at 08:49

shamon shamsudeen

5,466
17
64
129

Angularjs Error in loading external jsonfile from server

3 Answers3