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

时间:2013-11-12 06:10:24

标签: javascript jquery

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

正如另外提到的那样:

  

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

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

2 个答案:

答案 0 :(得分:0)

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

答案 1 :(得分:0)

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

不幸的是,早期的IE版本(6-9)不支持CORS,但是已经建立了针对浏览器的polyfill,它们本身并不实现CORS。 easyXDM就是这样的一种填充物。

在基本级别,下面是一个示例请求(来自上面的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呼叫将使用哪些标头或动词。飞行前实际上是与主Ajax调用的单独调用,但仅在某些条件下调用。

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