javascript - 有什么办法可以绕过测试服务器的跨源资源共享？

Question

我正在为我儿子的 Wordpress 网站做一些 javascript/jQuery 编程，我通常喜欢在我的家用电脑上而不是在实时网站上进行测试。他的站点始终采用他的域名，因此为了测试，我在我的主机文件中输入条目以将他的域名重定向到我的本地主机。

但是，我正在尝试为 Yahoo finance api 测试 json 回调，但我收到有关跨源资源共享的错误。雅虎显然对我的主机文件一无所知，所以它收到了我的请求，告诉它要将结果发送到另一个域。

我不确定在我的本地系统上启用 CORS 是否有帮助，尽管我尝试过这样做。有可能我错了，它应该可以工作，也许我没有正确启用它，但我怀疑我需要在他的真实服务器(在 GoDaddy 上)上启用它，我不知何故怀疑他们是否愿意这样做。

有谁知道解决这个问题的方法吗？如果没有比较简单的解决方案，我想我会在实时服务器上进行测试，并且只使用未发布的页面进行测试，这应该是无害的。

编辑
我想我现在更清楚发生了什么。我的理解是，这可以防止网站通过将我请求的数据重定向到其他地址(或类似地址)来拦截我请求的数据。

根据要求，这是我的测试代码:

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);   

我的回调函数从来没有被调用过，所以它在这里不相关。我可以将整个 URL 粘贴到 Firefox 或 Chrome 的地址栏中，然后无误地取回数据，所以我知道这是对的。

我按照 Maximillian Laumeister 的建议尝试了命令行“google-chrome --disable-web-security”，但在控制台中出现了这个错误:

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.

(他的网站是wenboinvestment.com)

Answer 1

第 1 部分 - 为什么会出现跨源错误

您的错误是由您的浏览器强制执行 Same-Origin Policy 引起的，除非满足一组特定条件，否则网页将无法访问其他域的资源。

绕过跨源资源共享错误的一种方法是暂时禁用浏览器中的同源策略。对于 Google Chrome，使用 --disable-web-security 命令行参数运行 Chrome。这将禁用 Chrome 中的同源策略，这意味着您可以从任何您想要的域加载跨域。 (当然，不要在关闭这些检查的情况下浏览互联网，它们在那里是有原因的。)

操作方法如下:

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.

---

第 2 部分 - 为什么会出现 404 错误

关于您的第二个错误，您的查询只是格式错误(您将 GET 参数与您的查询字符串一起编码，而要正常工作，它们需要未编码)。这是一个演示固定查询的示例:

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);
}

运行 this JSFiddle在 Chrome 中，它应该看起来像这样(您可以看到打印到控制台的 AJAX 结果):

事实证明，当您有一个格式正确的查询时，Yahoo 会设置正确的服务器 header ，因此如果您只是使用 YQL，您甚至不需要使用 --disable-网络安全技巧。