同源策略:确保Web安全与引发跨域问题的平衡

同源政策保证了浏览器的安全性的同时,也导致了跨域的产生

同源策略是一个重要的安全策略,它用于限制一个origin的文档或者它加载的脚本如何能与另一个源的资源进行交互。它能帮助阻隔恶意文档,减少可能被攻击的媒介。
同源:协议、域名、接口同时相同

同源政策的作用:

限制了当前域下的js脚本访问其他域下的cookie、‌localStorage和indexDB‌。‌

‌当前域下的Ajax请求无法发送到其他域‌。‌

‌当前域下的js脚本无法操作或访问其他域下的DOM‌。‌

同源政策保证了浏览器的安全性的同时,也导致了跨域的产生

js跨域是指通过js在不同的域之间进行数据传输或通信。只要协议、域名、端口有任何一个不同,都被当作是不同的域
跨域是因为后台接口文件和web前端文件不在同一个域名下,浏览器拦截了后台发送的数据

跨域的案例:

基于不同的父域之间,如:www.a.com和www.b.com

基于同一父域的子域之间,如:a.c.com和b.c.com

端口的不同,如:www.a.com:8080和www.a.com:8088

协议不同,如:http://www.a.com和https://www.a.com

跨域的解决方法

后台解决方法:
header(‘Access-Control-Allow-Origin:*‘); // header可以允许特定的域名访问请求

jsonp也支持跨域,如何获取返回的数据:
web页面调用js文件则不受跨域的影响
凡是拥有“src”这个属性的标签都拥有跨域的能力,比如script、img、iframe

框架中的解决方法:
vue-cli中axios有跨域代理设置(即使服务器没有设置header,也可以跨域)
devServer: {
    //proxy: ‘http://localhost:80‘
    proxy: ‘http://www.wenxuesucai.com:80‘
},

免费的API接口开放平台

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值