2

In my code, I'm fetching some JSON from another server of a different domain with a jQuery, and get an error in the browser.

XMLHttpRequest cannot load http://url_containing_json.com. Origin http://localhost:53651  is not allowed by Access-Control-Allow-Origin

Is it easy to configure the Brackets server to allow this? Or do I need to set up my own server to be able to do this?

4castle
  • 32,613
  • 11
  • 69
  • 106
Bradley Bossard
  • 2,439
  • 2
  • 23
  • 30

2 Answers2

0

This restriction comes from the web browser, not the server. It's called the same-origin security policy (aka the same-domain policy).

What is the http://url_containing_json.com "JSON server" in question? Is it a server you have some control over? If so, then you can either:

A) Upload your code to the "JSON server" itself so your site is served from that same domain; or

B) Upload your code to some other staging server, and use CORS on the JSON server to essentially whitelist the staging server's domain name (the JSON server would provide an Access-Control-Allow-Origin HTTP header, as mentioned in the error message).

On the other hand -- if the "JSON server" is completely third-party, does it actually want other sites like yours to be fetching its JSON? If so, then it should already support either CORS (with a blanket allow-all policy) or JSONP (an older way of allowing access, though your requests will need to be set up a little differently).

If the JSON server doesn't permit cross-domain requests, you have one last resort: use your own site's server as a proxy. Instead of your page pinging the JSON server directly, your page pings its own server, which then pings the JSON server on the page's behalf.

All these approaches require running your own server instead of using the built-in Brackets "localhost" server. You can point Brackets at your own server via File > Project Settings..., but be aware that will disable certain features like Live HTML Development. (Though if you're able to use option "B" above you could maybe hack your hosts file to keep using the built-in Brackets server instead by changing its apparent domain).

Hope that helps!

Community
  • 1
  • 1
peterflynn
  • 4,667
  • 2
  • 27
  • 40
  • 1
    So, in researching this question before I posted, it seems like it's a matter of adding a header via the server, like the link below, and therefore I figure there is some way to do that with the internal server in Brackets, but I can't figure out how to access it or where it lives. The whole point of using Brackets to me is the Live Preview feature, so it would be nice to know how to configure it's internal server http://stackoverflow.com/questions/5008944/how-to-add-an-access-control-allow-origin-header – Bradley Bossard Oct 02 '13 at 16:17
  • Unfortunately it's the other way around - you need to add a header to the server _you're contacting_. The "JSON server" in this case. If you don't control that server and it doesn't want to give you access (i.e. it doesn't provide that header nor a JSONP-based API) then your options are pretty limited. That's true even in production. – peterflynn Oct 03 '13 at 01:20
  • Do you mind if I ask what the server is that you're trying to contact? – peterflynn Oct 03 '13 at 01:21
0

Bumped into the exact same problem. The way I got around this was to use a jsonp ajax request type, using the dataType parameter of the $.ajax() call. See the JQuery documentation on this call.

sagism
  • 881
  • 4
  • 11
  • 18