(1)get---请求跨域
使用JsonP进行跨域请求,其本质是通过<script src="url"> 可以接受不同域的js代码的方式来实现get请求的跨域;
(2)post--请求跨域
CORS协议规定的HTTP头:
这里讨论的HTTP请求是指由Ajax XMLHttpRequest对象发起的,所有的CORS HTTP请求头都可由浏览器填充,无需在XMLHttpRequest对象中设置。以下是CORS协议规定的HTTP头,用来进行浏览器发起跨域资源请求时进行协商:
1. Origin。HTTP请求头,任何涉及CORS的请求都必需携带。
2. Access-Control-Request-Method。HTTP请求头,在带预检(Preflighted)的跨域请求中用来表示真实请求的方法。
3. Access-Control-Request-Headers。HTTP请求头,在带预检(Preflighted)的跨域请求中用来表示真实请求的自定义Header列表。
4. Access-Control-Allow-Origin。HTTP响应头,指定服务器端允许进行跨域资源访问的来源域。
5. Access-Control-Allow-Methods。HTTP响应头,指定服务器允许进行跨域资源访问的请求方法列表,一般用在响应预检请求上。
6. Access-Control-Allow-Headers。HTTP响应头,指定服务器允许进行跨域资源访问的请求头列表,一般用在响应预检请求上。
7. Access-Control-Max-Age。HTTP响应头,用在响应预检请求上,表示本次预检响应的有效时间。在此时间内,浏览器都可以根据此次协商结果决定是否有必要直接发送真实请求,而无需再次发送预检请求。
8. Access-Control-Allow-Credentials。HTTP响应头,凡是浏览器请求中携带了身份信息,而响应头中没有返回Access-Control-Allow-Credentials: true的,浏览器都会忽略此次响应。
如何捕获回调数据,优雅地执行? 1、如何实现跨域的post请求? 要实现这样一个方法,我们有两个难点:
|
综合对比四种方式,还是第四种比较给力,兼容性好,不需要做服务器配置也不依赖Flash文件; |
1、CORS
利用CORS,让目标服务器设置标头"Access-Control-Allow-Origin:xxx.com ",表示允许设定的域向我们的服务端提交请求。
|
缺点:需要服务端配合,IE67不支持。
优点:W3C标准,配置简单;
|
2、Server Proxy 当前域实现一个代理,所有向外部域名发送的请求都径由该代理中转。 | 缺点:每个使用方都需要部署代理,数据中转低效,对js有侵入。 |
3、Flash Proxy 服务端部署跨域策略文件crossdomain.xml,页面利用不可见的swf跨域post提交数据实现跨域通信。 | 优点:兼容性好,传输数据量大; 缺点:依赖flash。 |
4、Invisible Iframe 概述:通过js动态生成不可见表单和iframe,将表单的target设为iframe的name以此通过iframe做post提交。 | 优点:兼容性佳,原生JS即可完全实现; 缺点:无法直接读取响应内容。 |
跨域资源共享(CORS)
Cross-Origin Resource Sharing (CORS) 是W3c工作草案,它定义了在跨域访问资源时浏览器和服务器之间如何通信。CORS背后的基本思想是使用自定义的HTTP头部允许浏览器和服务器相互了解对方,从而决定请求或响应成功与否。
CORS与JSONP相比,更为先进、方便和可靠。
1、 JSONP只能实现GET请求,而CORS支持所有类型的HTTP请求。
2、 使用CORS,开发者可以使用普通的XMLHttpRequest发起请求和获得数据,比起JSONP有更好的错误处理。
3、 JSONP主要被老的浏览器支持,它们往往不支持CORS,而绝大多数现代浏览器都已经支持了CORS。
对一个简单的请求,没有自定义头部,要么使用GET,要么使用POST,它的主体是text/plain,请求用一个名叫Orgin的额外的头部发送。Origin头部包含请求页面的头部(协议,域名,端口),这样服务器可以很容易的决定它是否应该提供响应。
服务器端对于CORS的支持,主要就是通过设置Access-Control-Allow-Origin来进行的。
Header set Access-Control-Allow-Origin *
为了防止XSS攻击我们的服务器, 我们可以限制域,比如
Access-Control-Allow-Origin: http://blog.csdn.net
很多服务都已经提供了CORS支持,比如 AWS 支持跨域资源分享功能CORS,向S3上传不需要代理。
<wiz_tmp_tag id="wiz-table-range-border" contenteditable="false" style="display: none;">