同源与跨域
一、同源:
指三个相同:
协议相同,域名相同,端口相同,不同源的网站不可以相互访问
同源的目的:保证用户信息的安全,防止恶意的网站窃取数据。同源策略是必须的,如果cookie在不同源的网站共享,那么互联网将毫无安全性可言。
同源策略的限制范围:
1.cookie,LocalStorage,IndexDB无法读取
2.ajax请求无法发送
3.DOM无法获得
如果我们知道两个网站都是安全的,那么我们希望两个网站能互相请求数据时,我们就需要用到跨域。
二、跨域
效果:不同源的网站之间可以互相访问
1.jsonp可以解决主流浏览器跨域数据访问的问题。
原理:服务端返回一个预先定义好的函数的调用 ,然后将后端的数据以该函数实参的形式传递给前端,前端需要声明一个函数,通过实参获取到服务端返回的数据。这个方法需要前后端配合
jquery将jsonp的封装得相当简单,只需要把datatype固定为jsonp即可
datatype:"jsonp"
jsonp和json并没有关系,只是jquery把jsonp当做json的形式封装起来了罢了。
##特点:
jsonp兼容性好
但是仅支持get请求
2.cors跨域资源共享
使用前提:
浏览器必须支持这个功能
后端必须支持这种跨域。
cors流程:
a.浏览器会根据同源策略查看是否是跨域请求,如果同源,那么浏览器直接发送ajax请求。
b.如果属于跨域,那么浏览器会发送一条不带数据的请求,查看服务端是否允许这种跨域。
c.如果服务端不允许cors跨域,那么浏览器不会发送ajax请求
d.如果服务端允许cors跨域(后端会设置一串代码),那么浏览器会发送ajax请求
##跨域是浏览器行为,是浏览器阻止了ajax请求,服务端没有跨域问题。
##特点:使用方便,只要后端允许cors跨域,和通常发送ajax请求没有什么区别。
兼容性不好,需要浏览器支持cors支持。
只要后端支持,前端不需要做任何操作。
3.反向代理
以代理服务器接受浏览器上的请求,然后把请求发送到内部服务器,然后将获取的结果发送给浏览器,这个代理服务器就是反向代理服务器。
反向代理是一个跨域解决方案,只要后端把环境配置好,前端不需要做任何操作。
操作流程:
打开httpd-conf文件,去掉135行和143行的注释(去掉第一个符号#)
变成:
LoadModule proxy_module modules/mod_proxy.so
LoadModule proxy_http_module modules/mod_proxy_http.so
修改 D:\phpStudy\Apache\conf\extra\httpd-vhosts.conf 文件,找到bxg对应的配置,添加以下代码
# 关闭正向代理
ProxyRequests off
# 开启反向代理,当服务器碰到/api的请求之后,会帮我们替换成http://api.botue.com/v8,并且发送请求获取数据。
ProxyPass /api http://api.botue.com/v8
只要后端支持,前端也不需要做任何操作。