前端跨域问题

跨域

1、域名地址组成

• 域名组成图如下:域名组成.png
  
• 当协议、主域名、端口号中任意一个不相同时，都算作不同域
• 不同域之间相互请求资源，就算作‘跨域’，如:http://www.abc.com/index.html 请求 http://www.efg.com/app.js
• Javascript 出于安全方面的考虑，有着同源策略的限制，不允许跨域调用其他页面的的对象
• 如下图:跨域情况.png
  

2、处理跨域方法之一——代理

• 通过在同域名的web服务端创建一个代理
• 北京服务站(域名:www.beijing.com) 广州服务器(域名:www.guangzhou.com)
• 北京服务器的后台 创建一个代理程序 proxy-guangzhouserver.php 来调用广州服务器，然后再把响应数据结果返回给前端，这样前端调用北京服务器的服务和调用广州服务器的效果一样
• 见 代理.png
  

3、处理跨域方法之二——jsonp

• 用于处理主流浏览器的跨域数据访问的问题
• jsonp只支持get请求，jsonp 是基于 标签的src属性，所以不可能支持 post;jquery的ajax的jsonp支持get，即使在type属性写post，实际请求仍为get请求。标签发起的请求只能是get请求

···前端js
$.ajax({
type:’GET’,
url:’http://127.0.0.1:8080/server.php‘,
dataType:’jsonp’,
jsonp:’callback’, //后端是php代码，可以获取到callback；请求时，在查询字符串的后面将callback写进，如果没有指定jsonp:’callback’,jQuery也会自动帮你指定
success:function(data){
if(data.success){
…
}else{
…
}
}
})
//请求值:=”>http://127.0.0.1:8080/server.php?callback=jQuery111111111111&=….
···

$jsonp=$_GET('callback');$result=$jsonp.'({"success":false,"msg":"...",})';echo $result//返回值:jQuery111111111111({'success':false,"msg":'....'})

4、处理跨域方法之三—— XHR2(或CORS,只支持get\post)

• html5提供的XMLHttpRequest Level2已经释宪案的跨域访问以及其他的一些功能
• IE10以下的版本都不支持
• 在服务器端做一些小的改造即可
  ···服务器端php语言设置
  header(‘Access-Control-Allow-Origin:‘) //指所有域都可以访问，也可以指定某个域可以访问
  header(‘Access-Control-Allow-Method:POST,GET’)
• 例如：

···前端js    $.ajax({        type:'GET',        url:'http://127.0.0.1:8080/server.php',        dataType:'json',        success:function(data){            if(data.success){            }else{            }        }    })    //请求值:http://127.0.0.1:8080/server.php?callback=jQuery111111111111&_=....···```后台php    $jsonp=$_GET('callback');    $result=$jsonp.'({"success":false,"msg":"...",})';    echo $result    //返回值:jQuery111111111111({'success':false,"msg":'....'})

上述是常见的几种跨域方式，当然还有很多种跨域方式，如XDR(IE8跨域解决方案)，Cross-document messaging和 WebSocket(HTML5解决方案),document.domain、location.hash和window.name(iframe形式)， flash socket …

详见 http://www.cnblogs.com/vajoy/p/4295825.html