Any way to get around resource sharing for a test server?
I am doing javascript / jQuery programming for my Wordpress site and usually I like to test on my home computer and not the website. His site takes his domain name all over the place, so for testing purposes I am making entries in my hosts file to redirect his domain name to my localhost.
However, I am trying to test the json callback for the Yahoo api api and I am getting a message about sharing resources between different sources. Yahoo obviously doesn't know anything about my hosts file, so it gets a request from me to pass the result to another domain.
I'm not sure if CORS will help on my local system, although I've tried it. I might be wrong and it should work, and I might have turned it on incorrectly, but I suspect I will need to turn it on on my real server (on GoDaddy) and I somehow doubt they would want to do this ...
Does anyone know how to get around this issue? Unless there is a fairly straightforward solution, I assume I'll be testing on a real server and just use a non-post page for testing, which should be pretty harmless.
EDIT
I think I now have a better understanding of what is going on. I understand that this protects me from the fact that I request hijacking data of the site, redirecting it to another 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 is never called, so this is not relevant here. I can paste the entire url into the Firefox or Chrome address bar and return the data without error, so I know it correctly.
I tried the command line "google-chrome --disable-web-security" as suggested by Maximilian Laumeris 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)
source to share
Part 1 - Why are you getting Cross-Origin error
Your error is caused by the fact that your browser enforces the Same Origin Policy , which prevents web pages from accessing resources from other domains, unless a specific set of conditions are met.
One way to work around resource sharing errors between multiple sources is to temporarily disable the "Same Source" policy in your browser. For Google Chrome, start Chrome with a command line argument --disable-web-security
. This will disable the same origin policy in Chrome, which means you can load cross-domain scope from whatever domain you want. (Of course, don't browse the web in general with these checks, they're there for a reason.)
Here's how to do it:
On Windows:
Create a shortcut for Chrome. Right click on it, click Properties and add:
--disable-web-security
in the "Target" field.
On Mac OS / Linux :
Open a command prompt and run:
google-chrome --disable-web-security
See this answer for details .
Part 2 - Why are you getting 404 errors
As for your second error, your request was just mangled (you coded the GET arguments along with your query string, when they must be uncoded to work properly). Here's an example to demonstrate a 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 result of the AJAX print on the console):
As it turns out, when you have a well-formed request, Yahoo sets the correct server headers, so if you're just working with YQL you don't even need to use the trick --disable-web-security
.
source to share