1:什么是域
两个URL具有相同的协议、主域名、子域名、端口便是相同的域,若有一个不同就是不同的域。
2:URL解析
http://c.b.a.com:8000/dir/file.js?params=22
http: 协议名
c.b.a.com:域名
8000: 端口号
dir:虚拟目录名
file.js: 请求的文件名
params:请求的参数名
--------------------------------------------------
一级域名: a.com
二级域名:b.a.com // b是子域名
三级域名:c.b.a.com // c、b是子域名
3:什么是跨域?
当前网页发起网络请求时所请求的接口(URL)必须和当前网页(请求当前网页的URL)在同一个域,否则就是跨域。
4:跨域的解决方式
4.1:JSONP: 只支持get请求
方式一:创建一个script标签,然后将回调函数作为参数,传给服务器
function callback (res) {}
var JSONP = document.createElement("script")
JSONP.type = "text/javascript"
JSONP.src = "url"
document.getElementsByTagName('head')[0].appentChild(JSONP)
方式二:直接使用script标签
function jsonpCallback(res){}
script type="text/javascript" src="http://crossdomain.com/services.php?callback=jsonpCallback
服务器返回数据:
jsonpCallback(data)
总结:
script请求的数据,是直接作为js代码进行运行的。
将回调函数的的名字传给服务器,服务器返回数据给前端时,将数据已如上形式返回,前端接收到后相当于直接调用了jsonpCallback这个函数
4.2:CORS协议
方法:前端一般什么也不做,只需要后台进行设置即可。后台在响应体中设置
如果需要跨域携带cookie,前端请求时需要设置withCredentials为true
Access-Control-Allow-Origin
Access-Control-Allow-Credentials
--------------------------------------------------------补充--------------------------------------------------
注意:如果需要跨域携带cookie,Access-Control-Allow-Origin这个字段不能返回*,需要是来源的域名。并且当前端设置了跨域携带cookie事,后台也需要设置Access-Control-Allow-Credentials字段
4.3:设置代理
方法:页面请求如果需要跨域,可以使当前请求先访问和页面URL同源的服务器,然后在服务器中请求另一台服务器的数据,接着返回给前端。这便是代理。
4.4:修改本地host
修改本地host进而达到欺骗浏览器的目的
5:同源策略
同源策略是浏览器规定的,也是页面请求无法跨域的根本原因。规定不同的域之间cookie、localstorage、IndexDB、无法共享
在域a中无法获取域b中的dom元素节点
ajax请求不能发送。
具体解决的方法:
http://www.ruanyifeng.com/blog/2016/04/same-origin-policy.html