0

I'm working on a cross platform (html5) project to be launched on Android and iOS later and I got a problem with getJSON to load data from a .json file locally on chrome browser. When calling

jQuery.getJSON("layout.json", this.onLoaded);

I get

Error: XMLHttpRequest cannot load file:///E:/app/layout.json. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https`

at jquery-3.2.1.js:9566 which is: xhr.send( options.hasContent && options.data || null );

I've surfed the internet looking for solutions and came up with these two solutions that are not working in my case:

  1. Enabling access-control-allow-origin manually on chrome
  2. Upload the project files on a server

I'm looking for a solution to load the json data locally.

Your help is highly appreciated!

YakovL
  • 7,557
  • 12
  • 62
  • 102
Mahmoud
  • 1
  • 1
  • 6
  • Please add some code samples from your project to get help. – arturkin Jun 15 '17 at 13:16
  • 1. use `HBuilder` this eclipse clone IDE and view local files automatic in a local web server or 2. thread JSON as js file and change it back when you use it in production environments – Yu Jiaao Jun 15 '17 at 13:45
  • @arturkin here is the code sample and the error I got: jQuery.getJSON("layout.json", this.onLoaded); Error: XMLHttpRequest cannot load file:///E:/app/layout.json. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https. jquery-3.2.1.js:9566 which is: xhr.send( options.hasContent && options.data || null ); – Mahmoud Jun 15 '17 at 18:42
  • @YuJiaao thanks for your input. The problem is I want a solution away from running the project on a server even locally. – Mahmoud Jun 15 '17 at 18:50
  • inserted the code example from the author's comment; improved formatting. Please clarify: does "load locally" mean that both the page that loads and the file that is loaded are local? – YakovL Jun 17 '17 at 10:55
  • Thanks @YakovL for your input and updating my post. I tried to edit it but I couldn't. I meant that they are running locally on PC without any host or server. – Mahmoud Jun 18 '17 at 11:33

2 Answers2

1

this chrome extension helped me with the same problem in chrome, check it out Allow-Control-Allow-Origin: *

Jonathan
  • 2,700
  • 4
  • 23
  • 41
  • Thanks jNg. Yes, this works fine but I work on a cross platform project so is there an alternative in such case? Could I allow this chrome policy using a javascript? – Mahmoud Jun 15 '17 at 18:53
  • I can't tell, but I'll do some research – Jonathan Jun 15 '17 at 18:56
1

I don't think there's a cross-browser solution since it is a security measure to protect user's data and browsers' verndors actually block this by intention. In Chrome you may use the --allow-file-access-from-files option when launching it but this is not a thing an ordinary user will accept and also there's (somewhy) no way to limit that preference for certain files only, hence this causes security issues again.

Still, if you create a local server, put the file you'd like to load and the page which is loading the file on the server, this becomes possible. This is quite feasible, there's a number of local servers for Android and probably for other OSes.

PS you can also create a browser extension. Since Chromium extensions are supported by many browsers these days (Opera, Vivaldi, Yandex etc) and even by FireFox, it may be an interesting option. But you have to learn the exact limitations of extensions, I'm not an expert in this area.

YakovL
  • 7,557
  • 12
  • 62
  • 102