9

Trying to use ajax, getJSON, and functions like that to fetch an external URL from a local (non-server) development computer. Is there a way to bypass the same origin policy, so that I can test locally, instead of having to upload to a server?

ina
  • 19,167
  • 39
  • 122
  • 201

8 Answers8

6

Here's the simple answer: chrome --disable-web-security

From the source code (chrome_switches.h):

// Don't enforce the same-origin policy.  (Used by people testing their sites.)
const char kDisableWebSecurity[]            = "disable-web-security";

I wanted to use jquery.js to send AJAX calls to a Google Apps python server running on port 8080. Just for testing, I wanted to run the browser and the server on the same machine.

I don't understand all the security nuances, but for temporary development it seems like a reasonable workaround. So long as I only use chrome for testing with this flag, it shouldn't be a problem.

Here's the whole command for Mac OS X:

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --disable-web-security

Vagrant
  • 1,696
  • 12
  • 19
4

We had the same need when developing our web app. Here's how we did it:

The browser and the server communicate only through JSON.
All the HTML is rendered in the browser using PURE (our JS template engine).
The browser code is developed locally like this:

We add a host parameter in the url of the app:

http://localhost/app.html?host=test.beebole-apps.com

In production, the JSON are sent to the server with a POST.
But here the function in charge of the ajax call will react to the host parameter and make a JSONP injection(GET) instead. 

<script src="http://test.beebole-apps.com/?callback=f2309892&json={...}" />
  • f2309892 is a temporary function, with a random name, that points to the method that will handle the response
  • json is the JSON we send to the server

It means you will need some cooperation from the backend to serve you the json wrapped in a callback function like:

f2309892( /*the json here*/ );

Except a size limitation(you can't send a big JSON to the server with a GET) it works like a breeze.
An other advantage is you can call all the different systems(development and test) from the same localhost.

Mic
  • 24,812
  • 9
  • 57
  • 70
  • this is great! i notice you don't have this local use of PURE in http://beebole.com/pure/documentation/what-is-pure-and-why/ ... Also - can you expand your words a slight bit to write a tutorial in http://beebole.com/pure/documentation/ ? – ina Aug 15 '10 at 03:20
  • also (just to be sure) - `http://localhost/app.html?host=test.beebole-apps.com` is on the clientside (where you have the client download an app with some sort of web server or URL paser in it...) and it calls the `test.beebole-apps.com` server? – ina Aug 15 '10 at 03:24
  • PURE is a JS library that build HTML from JSON data. It works on the browser. If you download the zip file, there is a directory called tutorial with some examples. – Mic Aug 15 '10 at 09:15
  • If you have a web server locally to develop, you can use http://localhost/app.html; If not, you can use something like file:///Users/mic/app.html or C:\test\app.html; And then in that page you inject the script tag with test.beebole-apps.com – Mic Aug 15 '10 at 09:20
2

There are different ways to get around this, depending on which browser you're using for development. For example:

  • In Firefox (Gecko), set security.fileuri.strict_origin_policy to false
  • In Chrome, start the browser with the option --allow-file-access-from-files

References: Firefox, Chrome

Ken Redler
  • 23,863
  • 8
  • 57
  • 69
1

Without touching the server -

The quickest and easiest way to bypass the same origin security policy in Firefox is the install the Force CORS add-on. This works with any service by inserting the proper headers into every response.

https://addons.mozilla.org/en-US/firefox/addon/forcecors/

Stevko
  • 4,345
  • 6
  • 39
  • 66
  • Worth mentioning that after installing you have to click view => toolbars => add-on bar. Then the cors button will show in the right bottom click on that to enable it. I unzipped the xpi and see there is a toggle function when a button was pushed but never see the button. – HMR Dec 26 '12 at 02:57
0

localhost is not allowed to use in CORS http://code.google.com/p/chromium/issues/detail?id=67743 use lvh.me instead

Deepak
  • 341
  • 1
  • 10
0

try this (php curl ayax cross domain - by google):

http://www.iacons.net/writing/2007/08/02/ajax-cross-domain-proxy/

http://www.phpfour.com/blog/2008/03/cross-domain-ajax-using-php/

http://jquery-howto.blogspot.com/2009/04/cross-domain-ajax-querying-with-jquery.html

andres descalzo
  • 14,887
  • 13
  • 64
  • 115
0

Since this is a development issue and not a end-user/functionality issue, rather than focusing on getting AJAX to cross domains get your development environment set up as a proxy to fetch the most recent data from the production servers. This is actually really easy to do.

You'd need to set up a web server in your dev environment (if it doesn't have one already), and then configure the server to respond to 404 requests by fetching and then echoing production data. You can set up your server so that only the AJAX data files are picked up (otherwise, it will be confusing to debug other files if production assets start showing up on your development pages). So if http://dev.myserver.com/data/json/mydata.json is missing, your 404 script will get http://prod.myserver.com/data/json/mydata.json and echo it to the client. The nice thing about this set-up is that you can use mock data very easily: if the file is there in your dev environment, your AJAX script will get that; but if you then erase or rename that file, you'll get the production data instead. This feature has been so useful I can't recommend it enough.

If you're working with XML, I'd recommend duplicating the HTTP headers in the 404. If your 404 process responds with a Content-Type of text/html, you won't get any responseXML to parse.

Andrew
  • 14,204
  • 15
  • 60
  • 104
0

I had that problem, too, using Chrome and the --allow-file-access-from-files option didn't really help. Back to the script my server needed to return, I added these headers to the response and it worked fine :

'Access-Control-Allow-Origin: http://localhost/'

and another one for allowing a sort of key exchange 

'Access-Control-Allow-Headers: X-KEY'
jonsca
  • 10,218
  • 26
  • 54
  • 62
hamzahir
  • 38
  • 11