跨域产生的根本原因,以及结局跨域的常用方法

谈谈前端跨域的那些问题

我们都知道浏览器具有同源策略,这就是使得每一种浏览器向服务器请求的过程中就产生了跨域的问题。

跨域是如何产生的?

跨域是产生在浏览器的!!!
这点毋庸置疑,由于浏览器发送请求(同源请求,异源请求==请求源),服务器端返回请求(目标源),浏览器接受返回后进行验证,验证通过则可以获取完成。验证不通过,则产生跨域问题。
跨域就是产生这个验证的问题阶段。理解了同源策略后,验证这个阶段就会判断是不是同源,从而,验证通不通过,就是跨域问题产生的根本所在。
url1 url2 是否同源
http://a.com http://a.com:8888 不同源
http://b.com http://b.com/a/s 同源
所谓同源指的是:http协议,域名,端口三者完全相同,和路径无关(a/s路径)
同源请求和异源请求:请求源和目标源一样就不会跨域
请求一个图片,也会产生跨域;
请求ajax(异源请求),会产生跨域;
请求ajax(同源请求),不会产生跨域;

首先理解下请求的两大类型:

请求分为:
简单请求
1. 请求方法为get HEAD post
2. 头部字段满足cors安全规范,详见w3c标准
3. 请求头的Content-Type为
text/plain
multipart/form-data
application/x-www-form-urlencoded.
满足以上三种。

其他的则为预检请求
发送: options{
origin:
Acess-Control-Request-Method:
Acess-Control-Request-Headers:
}
预检询问是否可以请求,如果可以发送真实请求(也就是简单请求)。

解决跨域问题的方法

  1. CORS

     	验证:规则就是cors(主要靠服务器端,服务器返回允许,就是允许,验证通过)
     	浏览器:origin:	http://a.com
     	服务器:Acess-Control-Allow-origin:	http://a.com
    

2.代理
解决: 服务器和服务器之间没有同源限制。
流程:浏览器------代理-------服务器

  1. jsonp
    由于同源策略对标签link,script等等的限制比较松(也有限制),
    jsonp可以利用这点实现跨域。
    js:创建函数callback(res)
    服务器端返回:callback(数据)

    	浏览器端加载执行callback函数,就获得了服务器端返回的数据。
    

以上方法为常用方法,还有什么,欢迎交流!!!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值