前端跨域问题解决

什么叫跨域呢？

当俩个站点域名，端口，协议任何一点不相同的话，它们之间就叫做跨域。例如：

http://www.example.com/detail.html  跨域请求： http://api.example.com/detail.html 域名不同  http://www.example.com:8080/detail.html 端口不同  http://api.example.com:8080/detail.html 域名、端口不同  https://api.example.com/detail.html 协议、域名不同  https://www.example.com:8080/detail.html 端口、协议不同

 

跨域解决方法一：JSONP

 

JSONP 是 JSON 的一种使用模式，可以解决主流浏览器的跨域数据访问问题，从jQuery1.2之后就开始支持了。其原理是根据 XmlHttpRequest 对象受到同源策略的影响，而  标签元素却不受同源策略影响，可以加载跨域服务器上的脚本，网页可以从其他来源动态产生 JSON 资料。用 JSONP 获取的不是 JSON 数据，而是可以直接运行的 JavaScript 语句。

 

JSONP的优点是：它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制；它的兼容性更好，在更加古老的浏览器中都可以运行，不需要XMLHttpRequest或ActiveX的支持；并且在请求完毕后可以通过调用callback的方式回传结果。

 

JSONP的缺点则是：它只支持GET请求而不支持POST等其它类型的HTTP请求；它只支持跨域HTTP请求这种情况，不能解决不同域的两个页面之间如何进行JavaScript调用的问题。另外它不提供错误处理，而且使用不信任的服务器会造成巨大安全隐患。

 

jsonp的实现原理

 

---服务器端jsonp.php

---客户端

 

用jQuery使用jsonp