Using jQuery to read a JSON file errors in Google Chrome

Question

I have a JSON file here:

http://dalexl.webs.com/products.json

I'm trying to read it on my site with Javascript/jQuery:

$.getJSON("http://dalexl.webs.com/products.json")

(Yes, I know that it isn't complete, I'm currently just trying to get it to load, I haven't worked on reading it yet)

I tried having in my own sites directory (I'm using Dreamweaver locally on my HD).

$.getJSON("json/products.json")

The problem is, in Chrome (I'm not sure about other browsers), the console gives me this error:

XMLHttpRequest cannot load http://dalexl.webs.com/products.json. Origin null is not allowed by Access-Control-Allow-Origin.

or:

XMLHttpRequest cannot load json/products.json. Origin null is not allowed by Access-Control-Allow-Origin.

At first, reading about the problem online suggested that it was Chrome thinking that a website was trying to read files on my computer. After moving the file online, however, the problem continues.

Does anybody have a solution to this? If it isn't supposed to be supported, why does jQuery have a native method of doing it?

Thanks!

Andreas Louv · Accepted Answer · 2011-09-30 12:10:16Z

2

you are trying to open cross domain? See:

http://en.wikipedia.org/wiki/Same_origin_policy

answered Sep 30, 2011 at 12:10

Andreas Louv

47.3k14 gold badges109 silver badges126 bronze badges

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

2 Comments

Freesnöw Over a year ago

It didn't work when loading from my own filesystem either though.

T.J. Crowder Over a year ago

@DadeLamkins: That's because the local filesystem is an origin (origin "null"). Some browsers allow origin null to retrieve anything from any origin, other browsers do not. Many don't allow the file:/// protocol in ajax calls at all.

T.J. Crowder · Accepted Answer · 2011-09-30 12:18:23Z

1

Unless the page on which the script executing the line

$.getJSON("http://dalexl.webs.com/products.json")

is also on http://dalex1.webs.com, you're running afoul of the Same Origin Policy, a restriction on what resources you can load via XMLHttpRequest (e.g., "ajax"). See the link for details.

Your options for getting around the SOP are:

JSON-P, which requires modifying the data you're returning, but in a trivial way.
Cross-Origin Resource Sharing, a relatively recent standard which the server and browser would both need to support. (Recent versions of Firefox, Opera, and Chrome all support it with XMLHttpRequest; IE8 and above support it, but only via XDomainRequest object rather than the standard XMLHttpRequest. Details here.)
In really tricky situations, you might look at using YQL as a cross-domain proxy.

~~Separately, note that the JSON you're returning is invalid (missing commas between properties), see jsonlint.com and others for validation tools.~~ It is now you've fixed it.

answered Sep 30, 2011 at 12:18

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

3 Comments

Freesnöw Over a year ago

So, if I host the whole site on the webs account, it will work? -EDIT- What if I hosted my own small little http server on my computer, would that work?

T.J. Crowder Over a year ago

@DadeLamkins: As long as the requests are not crossing origins, yes, that will work. So if the page issuing the call is on http://dalex1.webs.com and the data being requested is also on http://dalex1.webs.com, that will work. If you run a local web server, and the page doing the request is on http://localhost and the data being requested is on http://localhost, that will work. It will not work for a page on http://localhost to request the data from http://dalex1.webs.com or vice-versa. Read the SOP link for details.

Freesnöw Over a year ago

Thanks a ton! I've decided to run a local server so I don't have to re-upload every 2 seconds :)

Tom · Accepted Answer · 2011-09-30 12:16:58Z

1

http://dalexl.webs.com/products.json does not return valid json. I like using http://jsonviewer.stack.hu/ for testing (when you press the "viewer" button you get an error).

You have three missing commas:

After: "url": "#1"

After: "url": "#2"

Before: "Cakes": {

edited Sep 30, 2011 at 12:16

answered Sep 30, 2011 at 12:11

Tom

1,05211 silver badges28 bronze badges

Collectives™ on Stack Overflow

Using jQuery to read a JSON file errors in Google Chrome

3 Answers 3

2 Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related