什么情况下会遇到跨域,前端常见处理跨域的几种方式

浏览器最核心,最基本的安全功能是同源策略。限制了一个源中加载文本或者脚本与其他源中资源的交互方式,当浏览器执行一个脚本时会检查是否同源,只有同源的脚本才会执行,如果不同源即为跨域。

  1. jsonp:原理就是利用了script标签src属性外联引入文件不受同源策略的限制,在页面中动态插入了script,script标签的src属性就是后端api接口的地址,并且以get的方式将前端回调处理函数名称告诉后端,后端在响应请求时会将回调返还,并且将数据以参数的形式传递回去;
  2. document.domin:两个域名必须属于同一基础域名,并且所有的协议端口完全一致,否则无法跨域;例:beijing.58.com
    tianjing.58.com ;
  3. iframe、hash :父页面向子页面传输数据:将要传递的数据添加到子页面的url的hash值上,子页面通过location.hash
    并添加定时器实时地动态父页面传来的数据;子页面向父页面传输数据:利用window.name的特性,及页面重新加载但当前页的name值不变,即使换了一个页面。需要三个页面配合使用。一个应用页面,一个数据页面,一个代理文件。代理文件一般是一个没有任何内容的html页面,需要和应用页面在同一域下。将数据页面的窗口换成代理页面,代理页面通过window.name获取数据页面留下的数据,应用页面再访问和它同源的代理页面获取数据,就完成了跨域;
  4. CORS(Cross-Origin-Resource-Sharing):在服务器端设置的,不需要客户端进行操作。Cors背后的思想是使用自定义的http头部让浏览器和服务器进行沟通,从而决定请求或响应是否应该成功,还是应该失败。浏览器向服务器发送请求,如果服务器认为这个请求可以接受,就在Access-Control-Allow-Origin头部中回发相同的源信息(如果是公共资源,可以回发*);如果没有这个头部,或者有这个头部但信息源不匹配,浏览器就会驳回请求。正常情况下,浏览器会处理请求。(请求和响应都不包含cookie信息);
  5. 服务器跨域,服务器中转代理:前端向本地服务器发送请求,本地服务器代替前端再向服务器接口发送请求进行服务器间通信,本地服务器是个中转站的角色,再将响应的数据返回给前端。
  6. window.postMessage(h5新增)
  7. WebSocket(h5新增)
  8. nginx反向代理
  • 1
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值