谈谈前端跨域的那些问题
我们都知道浏览器具有同源策略,这就是使得每一种浏览器向服务器请求的过程中就产生了跨域的问题。
跨域是如何产生的?
跨域是产生在浏览器的!!!
这点毋庸置疑,由于浏览器发送请求(同源请求,异源请求==请求源),服务器端返回请求(目标源),浏览器接受返回后进行验证,验证通过则可以获取完成。验证不通过,则产生跨域问题。
跨域就是产生这个验证的问题阶段。理解了同源策略后,验证这个阶段就会判断是不是同源,从而,验证通不通过,就是跨域问题产生的根本所在。
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:
}
预检询问是否可以请求,如果可以发送真实请求(也就是简单请求)。
解决跨域问题的方法
-
CORS
验证:规则就是cors(主要靠服务器端,服务器返回允许,就是允许,验证通过) 浏览器:origin: http://a.com 服务器:Acess-Control-Allow-origin: http://a.com
2.代理
解决: 服务器和服务器之间没有同源限制。
流程:浏览器------代理-------服务器
-
jsonp
由于同源策略对标签link,script等等的限制比较松(也有限制),
jsonp可以利用这点实现跨域。
js:创建函数callback(res)
服务器端返回:callback(数据)浏览器端加载执行callback函数,就获得了服务器端返回的数据。
以上方法为常用方法,还有什么,欢迎交流!!!