基本的AJAX请求在所请求的资源上获得“否”访问控制允许原点“头”错误 [英] Basic AJAX request gets "No 'Access-Control-Allow-Origin' header is present on the requested resource" error

问题描述

我试图向 https://stackoverflow.com/10m发送简单的 GET 请求在一个jQuery AJAX请求。

I attempt to send a simply GET request to https://stackoverflow.com/10m in a jQuery AJAX request.

这是一个非常简单的一个：

It's a very simple one:

$.ajax({
    type: 'GET',
    url:'https://stackoverflow.com/10m',
    dataType: 'text/html',
    success:function(){alert("Success");},
    error:function(){alert("Error");},
});

然而，无论我尝试过，我得到了 XMLHttpRequest无法加载https： //stackoverflow.com/10m。请求资源上不存在访问控制允许源标头。原来'http：// localhost：7776'因此被禁止访问。

However, whatever I've tried, I got XMLHttpRequest cannot load https://stackoverflow.com/10m. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:7776' is therefore not allowed access.

我尝试了一切，从添加启用功能（app.all ）也是 app.js ，向AJAX请求添加标头：{} 定义，设置 dataType 到 JSONP ，甚至 text / plain ，使用简单的AJAX而不是jQuery，甚至下载一个启用CORS的插件 - 但没有什么可以帮助。

I tried everything, from adding enabling functions (app.all) too app.js, adding header : {} definitions to the AJAX request, setting dataType to JSONP, or even text/plain, using simple AJAX instead of jQuery, even downloading a plugin that enables CORS - but nothing could help.

如果我尝试访问任何其他网站，也会发生这种情况。

And the same happens if I attempt to reach any other sites.

任何想法，一个正确和简单的解决方案？有没有什么？

Any ideas for a proper and simple solution? Is there any at all?

推荐答案

这是设计。您不能使用XMLHttpRequest向其他服务器发出任意HTTP请求，除非该服务器允许通过为请求的主机发出Access-Control-Allow-Origin标头。

This is by design. You can't make an arbitrary HTTP request to another server using XMLHttpRequest unless that server allows it by putting out an Access-Control-Allow-Origin header for the requesting host.

https://developer.mozilla.org/en-US/docs/ Web / HTTP / Access_control_CORS

您可以在脚本标签中检索它（脚本和图像和样式表没有相同的限制），但除非

You could retrieve it in a script tag (there isn't the same restriction on scripts and images and stylesheets), but unless the content returned is a script, it won't do you much good.

这里有一个关于CORS的教程：

Here's a tutorial on CORS:

http://www.bennadel.com/blog/2327-cross-origin-resource-sharing-cors-ajax-requests-between-jquery-and-node-js.htm

这些都是为了保护最终用户而完成的。假设一个图像实际上是一个图像，一个样式表只是一个样式表，一个脚本只是一个脚本，请求来自另一个服务器的资源不能真的做任何的伤害。

This is all done to protect the end user. Assuming that an image is actually an image, a stylesheet is just a stylesheet and a script is just a script, requesting those resources from another server can't really do any harm.

但是一般来说，跨原始请求可能会做很糟糕的事情。说你，Zoltan，正在使用coolsharks.com。另请注意，您已登录mybank.com，并且您的浏览器中有一个mybank.com的cookie。现在，假设coolsharks.com向mybank.com发送一个AJAX请求，要求将所有的钱转入另一个帐户。因为你存储了一个mybank.com cookie，所以他们成功地完成了这个请求。所有这一切都没有您的知识，因为没有页面重新加载发生。这是允许一般跨站点AJAX请求的危险。

But in general, cross-origin requests can do really bad things. Say that you, Zoltan, are using coolsharks.com. Say also that you are logged into mybank.com and there is a cookie for mybank.com in your browser. Now, suppose that coolsharks.com sends an AJAX request to mybank.com, asking to transfer all your money into another account. Because you have a mybank.com cookie stored, they successfully complete the request. And all of this happens without your knowledge, because no page reload occurred. This is the danger of allowing general cross-site AJAX requests.

如果要执行跨站点请求，您有两个选项：

If you want to perform cross-site requests, you have two options:

1. 将您要求的服务器取得到
   
   a。通过输出包含您（或*）的Access-Control-Allow-Origin标题来承认您
   
   b。为您提供JSONP API。

或

1. 编写不符合标准的浏览器，不受任何限制。

In（1 ），您必须与正在请求的服务器进行合作，并且在（2）中，必须控制最终用户的浏览器。如果你不能完成（1）或（2），你几乎没有运气。

In (1), you must have the cooperation of the server you are making requests to, and in (2), you must have control over the end user's browser. If you can't fulfill (1) or (2), you're pretty much out of luck.

然而，有一个第三个选项（由charlietfl指出）。您可以从控制的服务器发出请求，然后将结果传回您的页面。例如

However, there is a third option (pointed out by charlietfl). You can make the request from a server that you do control and then pass the result back to your page. E.g.

<script>
$.ajax({
    type: 'GET',
    url: '/proxyAjax.php?url=http%3A%2F%2Fstackoverflow.com%2F10m',
    dataType: 'text/html',
    success: function() { alert("Success"); },
    error: function() { alert("Error"); }
});
</script>

然后在您的服务器上，最简单：

And then on your server, at its most simple:

<?php
// proxyAjax.php
// ... validation of params
// and checking of url against whitelist would happen here ...
// assume that $url now contains "http://stackoverflow.com/10m"
echo file_get_contents($url);

当然，这种方法可能会遇到其他问题：

Of course, this method may run into other issues:

• 您所代理的网站是否需要正确的引荐来源网址或某个IP地址？


• 请将cookies传递给目标服务器？


• 您的白名单是否充分保护您免受任意要求？


• 您将要转发哪些标题（例如修改时间等）您的服务器接收到浏览器，哪些将被忽略或更改？


• 您的服务器是否会被提交为非法的请求（因为您是代理人） ？

• Does the site you are a proxy for require the correct referrer or a certain IP address?
• Do cookies need to be passed through to the target server?
• Does your whitelist sufficiently protect you from making arbitrary requests?
• Which headers (e.g. modify time, etc) will you be passing back to the browser as your server received them and which ones will you omit or change?
• Will your server be implicated as having made a request that was unlawful (since you are acting as a proxy)?

我确定还有其他的。但是如果没有一个问题阻止它，这第三种方法可以很好地工作。

I'm sure there are others. But if none of those issues prevent it, this third method could work quite well.

这篇关于基本的AJAX请求在所请求的资源上获得“否”访问控制允许原点“头”错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！