项目中经常遇到的跨域请求的几种方法

什么是跨域
JSONP
proxy代理
cors
xdr

关于跨域无非就是jsonp和iframe，随着跨域请求的应用越来越多，W3C提供了跨域请求的标准方案（Cross-Origin Resource Sharing）。IE8、Firefox 3.5 及其以后的版本、Chrome浏览器、Safari 4 等已经实现了 Cross-Origin Resource Sharing 规范，实现了跨域请求。
在服务器响应客户端的时候，带上Access-Control-Allow-Origin头信息。

如果设置 Access-Control-Allow-Origin:*，则允许所有域名的脚本访问该资源。
Access-Control-Allow-Origin:http://www.phpddt.com.com,允许特定的域名访问。

　　由于浏览器同源策略，凡是发送请求url的协议、域名、端口三者之间任意一与当前页面地址不同即为跨域。具体可以查看下表（来源）

　　项目中经常遇到的跨域请求的几种方法

　　JSONP

　　这种方式主要是通过动态插入一个script标签。浏览器对script的资源引用没有同源限制，同时资源加载到页面后会立即执行（没有阻塞的情况下）。

1 <script>
2       var _script = document.createElement('script');
3       _script.type = "text/javascript";
4       _script.src = "http://localhost:8888/jsonp?callback=f";
5       document.head.appendChild(_script);
6     </script>

　　实际项目中JSONP通常用来获取json格式数据，这时前后端通常约定一个参数callback，该参数的值，就是处理返回数据的函数名称。

 1 <!doctype html>
 2 <html>
 3   <head>
 4     <meta charset="utf-8">
 5     <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
 6     <title>jsonp_test</title>
 7 
 8     <script>
 9       var f = function(data){
10         alert(data.name);
11       }
12       /*var xhr = new XMLHttpRequest();
13       xhr.onload = function(){
14         alert(xhr.responseText);
15       };
16       xhr.open('POST', 'http://localhost:8888/cors', true);
17       xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
18       xhr.send("f=json");*/
19     </script>
20     
21     <script>
22       var _script = document.createElement('script');
23       _script.type = "text/javascript";
24       _script.src = "http://localhost:8888/jsonp?callback=f";
25       document.head.appendChild(_script);
26     </script>
27   </head>

View Code