【前端学习——网络相关】浏览器同源策略和跨域

浏览器的同源策略

为什么要有?

帮助阻隔恶意文档,减少可能被攻击的媒介。(就是为了安全

如果非同源,共有三种行为受到限制

(1) Cookie、LocalStorage 和 IndexDB 无法读取。

(2) DOM 无法获得。

(3) AJAX 请求不能发送。

同源政策规定,AJAX请求只能发给同源的网址,否则就报错。

除了架设服务器代理(浏览器请求同源服务器,再由后者请求外部服务),有三种方法规避这个限制。

  • JSONP
    网页通过添加一个<script>元素,向服务器请求JSON数据,这种做法不受同源政策限制;服务器收到请求后,将数据放在一个指定名字的回调函数里传回来。
  • WebSocket
    WebSocket是一种通信协议,使用ws://(非加密)和wss://(加密)作为协议前缀。该协议不实行同源政策,只要服务器支持,就可以通过它进行跨源通信。
css 复制代码
GET /chat HTTP/1.1
Host: server.example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==
Sec-WebSocket-Protocol: chat, superchat
Sec-WebSocket-Version: 13
Origin: http://example.com

字段Origin,表示该请求的请求源(origin),即发自哪个域名。服务器可以根据这个字段,判断是否许可本次通信.

  • CORS 【待学习】
    CORS请求分成两类:简单请求(simple request)和非简单请求(not-so-simple request)。
    -- 简单请求

-- 非简单请求

凡是不同时满足上面两个条件,就属于非简单请求。

对于简单请求

浏览器自动在头信息之中,增加一个Origin字段。Origin说明本次请求来自哪个源(协议 + 域名 + 端口)。服务器根据这个值,决定是否同意这次请求。

  • 如果不在许可范围内 :服务器会返回一个正常的HTTP回应。但浏览器会发现这个回应的头信息没有包含Access-Control-Allow-Origin字段,就知道出错了,从而抛出一个错误,被XMLHttpRequest的onerror回调函数捕获。注意,这种错误无法通过状态码识别 ,因为HTTP回应的状态码有可能是200。
    (就是请求的资源会返回,但是浏览器发现不被许可,就要拦截,这也是一种错误,但不是网络请求的错误)
  • 在许可范围内:服务器返回的响应,会多出几个头信息字段。
css 复制代码
Access-Control-Allow-Origin: http://api.bob.com
Access-Control-Allow-Credentials: true
Access-Control-Expose-Headers: FooBar
Content-Type: text/html; charset=utf-8

对于非简单请求

比如请求方法是PUT或DELETE,或者Content-Type字段的类型是application/json。

会在正式通信之前,增加一次HTTP查询请求 ,称为"预检"请求(preflight)。

  • 浏览器先询问服务器,当前网页所在的域名是否在服务器的许可名单之中 ,以及可以使用哪些HTTP动词和头信息字段。只有得到肯定答复,浏览器才会发出正式的XMLHttpRequest请求,否则就报错。

跨域资源共享 CORS 详解 https://www.ruanyifeng.com/blog/2016/04/cors.html

浏览器同源政策及其规避方法 https://ruanyifeng.com/blog/2016/04/same-origin-policy.html

跨域

url是由:协议、域名、端口 三部分组成,三个都相同的才能互相访问

请求的url任意一个部分和当前不同都叫产生了跨域请求,违反了浏览器同源策略,满足同源限制。但是请求的话浏览器是会放行的,也就是你请求的服务器会收到你的请求。

同源限制是指:服务器响应了你的请求,但是浏览器进行了拦截(也就是服务器其实是把你要的东西传回去了,但浏览器不给你)。

配置跨域

如果要避免同源策略进行跨域请求 ,我们可以通过代理服务器的方式进行请求

先请求同源服务器,然后在我们的服务器请求其他域,然后被请求的服务器返回给我们服务器内容(服务器之间不存在跨域),然后我们的服务器把响应结果给浏览器。

浏览器发现结果来自于同源,就不进行拦截了。

相当于进行了代请求并转发。

https://www.bilibili.com/video/BV1GN4y1M7P5?p=34\&vd_source=5cef5968d539682b683e7d01b00ad01b

相关推荐
蜡笔小新星5 分钟前
Python Kivy库学习路线
开发语言·网络·经验分享·python·学习
凯子坚持 c5 分钟前
C语言复习概要(三)
c语言·开发语言
zqx_77 分钟前
随记 前端框架React的初步认识
前端·react.js·前端框架
无限大.17 分钟前
c语言200例 067
java·c语言·开发语言
余炜yw18 分钟前
【Java序列化器】Java 中常用序列化器的探索与实践
java·开发语言
攸攸太上18 分钟前
JMeter学习
java·后端·学习·jmeter·微服务
篝火悟者19 分钟前
问题-python-运行报错-SyntaxError: Non-UTF-8 code starting with ‘\xd5‘ in file 汉字编码问题
开发语言·python
Death20022 分钟前
Qt 中的 QListWidget、QTreeWidget 和 QTableWidget:简化的数据展示控件
c语言·开发语言·c++·qt·c#
六点半88823 分钟前
【C++】速通涉及 “vector” 的经典OJ编程题
开发语言·c++·算法·青少年编程·推荐算法
惜.己23 分钟前
javaScript基础(8个案例+代码+效果图)
开发语言·前端·javascript·vscode·css3·html5