跨域 、同源 、CORS、JSONP

同源策略

同源策略是浏览器故意设计的一个功能限制。

一、同源的定义

1. 源

源 = 协议 + 域名 + 端口号

如果两个 URL 的 协议、域名、端口号 都完全一致,那么这两个url就是同源的

二、同源策略定义

1. 浏览器规定

如果JS运行在源A里,那么久只能获取源A的数据,不能获取源B的数据,即 不允许跨域

注意: 这是浏览器的功能,浏览器故意这样设计的
(因为它要保护用户隐私)

同源策略的总结:不同源的页面之间,不准互相访问数据


跨域

一、什么是跨域

跨域 是由于浏览器不能获取其他网站的数据,产生这一切的原因就是因为浏览器的 同源策略 。同源策略 限制的行为:
(1)Cookie、LocalStorage 和 IndexDB 无法读取
(2)DOM 和 JS 对象无法获取
(3)Ajax请求发送不出去

二、解决跨域

1. CORS跨域

声明需要共享的语法:Access-Control-Allow-Origin:你的需要允许的域名
(注意:是在node中声明)

MDN:https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CORS#%E7%AE%80%E5%8D%95%E8%AF%B7%E6%B1%82

例:

response.setHeader('Access-Control-Allow-Origin',‘域名’)

如果需要允许两个网站,你就通过

console.log(request.headers['referer'])

读取到它来自哪个网站,你就在域名中写哪个网站

2. JSONP 跨域

先将提供的数据写到一个 js 文件当中。然后需求方一方引用该 js , js 文件执行函数,这样需求方就可以通过事先写好的函数,获取到数据,并且,这个实现写好的函数,就是一个很典型的回调。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容