Any way to get around cross-origin resource sharing for test server?

Question

I'm doing some javascript/jQuery programming for my son's Wordpress website, and I normally like to test on my home computer rather than the live website. His site assumes his domain name throughout, so for testing, I make entries in my hosts file to redirect his domain name to my localhost.

However, I'm trying to test a json callback for a Yahoo finance api, and I get an error about cross-origin resource sharing. Yahoo obviously knows nothing about my hosts file, so it's getting a request from me telling it to send the result to another domain.

I'm not sure if enabling CORS on my local system will help, although I tried doing it. It's possible I'm wrong and it should work, and maybe I enabled it incorrectly, but I suspect I would need to enable it on his real server (on GoDaddy), and I somehow doubt if they would want to do that.

Does anyone know of a way to get around this problem? If there is no fairly simple solution, I guess I will test on the live server, and just use a non-published page for the testing, which should be fairly innocuous.

EDIT
I think I understand better now what's happening. My understanding is that this protects me from having a site intercept data I request by redirecting it to a different address (or something like that).

As requested, here is my test code:

var data = encodeURIComponent('select  from yahoo.finance.quotes where symbol in ("GOOG")&env=http://datatables.org/alltables.env&format=json');
var url = 'http://query.yahooapis.com/v1/public/yql ';
jQuery.getJSON(url, 'q=' + data, callback);   

My callback function never gets called, so it's not relevant here. I can paste the entire URL into the address bar of either Firefox or Chrome, and get the data back without error, so I know that's right.

I tried the command line "google-chrome --disable-web-security" as suggested by Maximillian Laumeister, and got this error in the console:

XMLHttpRequest cannot load http://query.yahooapis.com/v1/public/yql%20?q=select%20%20from%20yahoo.fina…OG%22)%26env%3Dhttp%3A%2F%2Fdatatables.org%2Falltables.env%26format%3Djson. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://www.wenboinvestment.com' is therefore not allowed access. The response had HTTP status code 404.

(His website is wenboinvestment.com)

Answer 1

Part 1 - Why you're getting the Cross-Origin error

Your error is caused by your browser enforcing the Same-Origin Policy, which keeps web pages from accessing resources from other domains unless a specific set of conditions is met.

One way to bypass cross-origin resource sharing errors is to temporarily disable the Same-Origin Policy in your browser. For Google Chrome, run Chrome with the --disable-web-security command-line argument. This will disable the same-origin policy in Chrome, which means you can then load cross-domain from whatever domain you want. (Of course, don't browse the internet at large with these checks off, they're there for a reason.)

Here's how to do it:

In Windows:

Create a shortcut to Chrome. Right click it, click "Properties" and add:

--disable-web-security

to the "Target" field.

---

In Mac OS / Linux:

Open a command prompt and run:

google-chrome --disable-web-security

---

For more details, see this Stack Overflow answer.

---

Part 2 - Why you're getting the 404 error

In regards to your second error, your query was just malformed (you were encoding GET arguments along with your query string, whereas to work properly they need to be unencoded). Here is an example demonstrating the fixed query:

var data = encodeURIComponent("select * from yahoo.finance.quotes where symbol in ('GOOG')");
var url = 'http://query.yahooapis.com/v1/public/yql';
jQuery.getJSON(url, 'q=' + data + '&env=http://datatables.org/alltables.env&format=json', callback);

function callback(xhr) {
    console.log(xhr);
}

Run this JSFiddle in Chrome, and it should look like this (you can see the AJAX result printing to the console):

As it turns out, when you have a correctly-formed query, Yahoo sets the proper server headers, so if you're just working with YQL, you don't even need to use the --disable-web-security trick.