Web前端——跨域问题

目录

• • • 1.跨域问题
    • 2.为什么要跨域？
    • • 演示跨域问题
    • 3.利用jsonp进行跨域
    • • 演示jsonp跨域
      • 演示用jQuery的方式发送jsonp请求
      • 简化方法发送jsonp
    • 4.用cros进行跨域
    • • cros跨域演示
    • 5.proxy模式简介

1.跨域问题

什么是跨域?
首先,现代浏览器为了安全,做了一个同源限制.
也就是所谓的同源安全策略.
本质上,其实是不存在所谓的跨不跨域的.
把浏览器想象成一个发送网络请求的软件.
按照道理来说,请求都是可以发送出去的.
但是在 web 端,浏览器里,这么做的就不合适.
如果网络上的接口可以不受限制的被任意人调用.
那将是一个非常混乱的场景。

所以,为了防止这种情况,浏览器做了这个同源策略来防止这种情况发生.
对,一般服务器不管这个事情.
跨域指的是,A网站内部向B网站发送一个AJAX请求.
由于浏览器有同源策略的限制,默认情况下,是不允许 A网站向 B 网站请求数据资源的.

http://my.website.com/ ---> http://your.website.com/ 是不允许的.
具体来说,凡是发送请求中,协议,主机名,端口号 有一个不同,即为跨域请求.
上述例子:my.website.com 和 your.website.com 就属于主机名不同而导致的跨域.

总结一句:
协议相同 + 域名相同 + 端口号相同
浏览器才认为是同一个网站.
才不同受到同源策略的影响.
才可以正常的发送 AJAX 请求.
其他情况下,发送 AJAX 请求,都属于跨域.

请注意: 这里说的是 XMLHttpRequest 下的 AJAX 请求.
对于 <img> , <script>, <link> 等标签,就不存在跨域请求.(除非对方后台做了防盗链)

所谓的同源策略是浏览器实现的,而和后台服务器无关.
A 发送请求到 B. 请求实际上是发送到了 B 后台, B后台接受到数据后.
其实也有返回.
只不过,这个数据返回到浏览器之后,浏览器把这个数据给劫持了.不让A网站使用。

2.为什么要跨域？

因为当一个项目变大时,把所有的内容都丢在一个网站或者是后台服务器中是不现实的.
比如:
一个网站体量很大.有很多可以独立且复杂的业务
比如有一个订单管理的后台数据API网站服务.
比如有一个用户管理的后台数据API网站服务.
比如有一个新闻管理的后台数据API网站服务.
最后剩下的就是web的UI层面的东西.
把这个UI层面的东西和哪个数据服务API的网站集成在一起比较合适呢
都不适合.它应该是一个专门的网站.

所以域名可能存在如下情况:
?	主网站(UIWeb)域名为: http://www.relax.com/ 
?	订单数据服务接口域名为: https://order.relax.com/orderList 
?	用户数据服务接口域名为: https://users.relax.com/userList 
?	新闻数据服务就扣域名为: http://news.relax.com/newList 
所以,UIWeb 如果需要请求这数据.
?	请求订单数据: 协议不同 https|http , 二级域名不同 order | www , 端口号不同 443|80 --> 跨域
?	请求用户数据: 协议不同 https|http , 二级域名不同 users | www , 端口号不同 443|80 --&