加载外部页面的跨域解决方法答案

【问题标题】：Cross-domain workaround to load an external page加载外部页面的跨域解决方法
【发布时间】：2013-11-24 04:29:23
【问题描述】：

这里是 jQuery 文档：
http://api.jquery.com/load/

作为附加说明提到：

由于浏览器安全限制，大多数“Ajax”请求都受制于同源政策；请求无法成功检索来自不同域、子域或协议的数据。

有没有办法绕过这个限制？

【问题讨论】：

标签： javascript jquery

【解决方案1】：

一种方法是在服务器上创建一个请求外部页面的代理页面。实现取决于所使用的技术，但想法是您可以对代理页面进行 ajax 调用，而不是与调用页面位于同一域中。

【讨论】：

感谢您的回答！ "一种方法是在服务器上创建一个请求外部页面的代理页面。" 例如，我如何使用PHP 来做到这一点？

【解决方案2】：

是的，有几种方法可以解决这个问题。但我强烈建议CORS（跨域资源共享）。 CORS 是解决跨域 Ajax 的新兴标准。这正在取代 JSONP（存在已知的安全问题）等方法。

不幸的是，旧的 IE 版本 (6-9) 不支持 CORS，但是已经为不原生实现 CORS 的浏览器建立了 polyfill。 easyXDM 就是这样一种 polyfill。

在基本层面上，下面是一个示例请求（来自上面的 MDN 链接），其中浏览器生成带有 Origin 标头的请求，指示请求的域，由端点：

GET /resources/access-control-with-credentials/ HTTP/1.1
Host: bar.other
User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b3pre) Gecko/20081130 Minefield/3.1b3pre
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Connection: keep-alive
Referer: http://foo.example/examples/credential.html
Origin: http://foo.example
Cookie: pageAccess=2

支持 CORS 的 Ajax 端点可以用浏览器验证的相应标头进行响应。请参阅此示例中的 Access-Control-Allow-Origin 和 Access-Control-Allow-Credentials：

HTTP/1.1 200 OK
Date: Mon, 01 Dec 2008 01:34:52 GMT
Server: Apache/2.0.61 (Unix) PHP/4.4.7 mod_ssl/2.0.61 OpenSSL/0.9.7e mod_fastcgi/2.4.2 DAV/2 SVN/1.4.2
X-Powered-By: PHP/5.2.6
Access-Control-Allow-Origin: http://foo.example
Access-Control-Allow-Credentials: true
Cache-Control: no-cache
Pragma: no-cache
Set-Cookie: pageAccess=3; expires=Wed, 31-Dec-2008 01:34:53 GMT
Vary: Accept-Encoding
Content-Encoding: gzip
Content-Length: 106
Keep-Alive: timeout=2, max=100
Connection: Keep-Alive
Content-Type: text/plain

浏览器还可以发送一个预检（使用 OPTIONS 动词），它可以向服务器指示 Ajax 调用将使用哪些标头或动词。 pre-flight 实际上是一个独立于主要 Ajax 调用的调用，但仅在特定条件下调用。

许多 Web 服务器（IIS、Apache）通过模块支持 CORS。服务器将需要配置以将来源、允许的动词、标题等列入白名单。也可以使用通配符，但不推荐使用。

【讨论】：

CORS 看起来很有希望，但如果你提供了一个 Fiddle，我会非常感激，所以我知道如何在行动中使用它。谢谢！
对于支持 CORS 的浏览器，客户端（浏览器）会发送一个 pre-flight 请求，这是一种在主请求之前的握手，或者根据 HTTP 谓词立即发出实际请求，无论是否自定义涉及请求标头等。为 Ajax 响应提供服务的服务器也需要支持 CORS，使用适当的标头和实际响应数据进行响应。