AJAX请求得到“在所请求的资源上不存在'Access-Control-Allow-Origin'报头".错误 [英] AJAX request gets "No 'Access-Control-Allow-Origin' header is present on the requested resource" error

问题描述

我尝试在jQuery AJAX请求中发送GET请求.

I attempt to send a GET request in a jQuery AJAX request.

$.ajax({
    type: 'GET',
    url: /* <the link as string> */,
    dataType: 'text/html',
    success: function() { alert("Success"); },
    error: function() { alert("Error"); },
});

但是，无论我尝试了什么，我都得到了XMLHttpRequest cannot load <page>. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:7776' is therefore not allowed access.

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

我尝试了一切，从使用简单的AJAX而不是jQuery向AJAX请求中添加header : {}定义到将dataType设置为JSONP甚至是text/plain，甚至下载了一个启用CORS的插件-但什么都没有可以帮忙.

I tried everything, from adding header : {} definitions to the AJAX request to 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/zh-CN/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. 获取您向其发出请求的服务器
   一种.通过放入包含您(或*)的Access-Control-Allow-Origin标头来接纳您
   b.为您提供JSONP API.

1. Get the server you are making the request to to either
   a. Admit you by putting out a Access-Control-Allow-Origin header that includes you (or *)
   b. Provide you with a JSONP API.

或

1. 编写您自己的不符合标准且没有限制的浏览器.

在(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地址?
• 是否需要将cookie传递到目标服务器?
• 您的白名单是否足以保护您免受任意请求的侵害?
• 当服务器接收到哪些标头(例如，修改时间等)后，您会将该标头传递回浏览器，并且您将省略或更改哪些标头?
• 会否暗示您的服务器发出了非法请求(因为您是代理人)?

我确定还有其他人.但是，如果所有这些问题都不能阻止它，那么第三种方法可能会很好地工作.

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

这篇关于AJAX请求得到“在所请求的资源上不存在'Access-Control-Allow-Origin'报头".错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！