浏览器同源政策之ajax请求不能发送

港控/mmm° 2022-05-25 01:59 201阅读 0赞

**同源政策（same-origin policy）是浏览器安全的基石**

同源指的是**三个相同**  
![这里写图片描述][70]

**限制范围**

（1） Cookie、LocalStorage 和 IndexDB 无法读取。
    
    （2） DOM 无法获得。
    
    （3） AJAX 请求不能发送。

下面重点讲解AJAX 请求不能发送：  
**同源政策规定，AJAX请求只能发给同源的网址，否则就报错。**  
有4种方法规避这个限制：

1.JSONP
    2.WebSocket
    3.CORS
    4.架设服务器代理

**1.JSONP**  
它的基本思想是，网页通过添加一个`<script>`元素，向服务器请求JSON数据，这种做法不受同源政策限制(只限制3种，上面有说)；一个要点就是允许用户传递一个callback参数给服务端，然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据

**局限性和安全性**  
1.JSONP仅适用于http的get请求。只能使用GET请求就意味着很多限制,比如：nginx服务器默认的限制是4K或者8K，这是根据服务器的硬件配置有关的，一般为内存一页的大小，目前大部分为4K，即4096字节  
2.JSONP缺乏错误处理机制，如果脚本注入成功后，就会调用回调函数，但是注入失败后，没有任何提示。  
3.在安全方面，借助JSONP有可能进行跨站请求伪造(CSRF)攻击，当一个恶意网站使用访问者的浏览器向服务器发送请求并进行数据变更时，被称为CSRF攻击。由于请求会携带cookie信息，服务器会认为是用户自己想要提交表单或者发送请求，而得到用户的一些隐私数据

**2.WebSocket**

WebSocket是一种通信协议，使用ws://（非加密）和wss://（加密）作为协议前缀。该协议不实行同源政策，只要服务器支持，就可以通过它进行跨源通信。

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），即发自哪个域名。

正是因为有了Origin这个字段，所以WebSocket才没有实行同源政策。因为服务器可以根据这个字段，判断是否许可本次通信。如果该域名在白名单内，服务器就会做出如下回应。  
除

HTTP/1.1 101 Switching Protocols
    Upgrade: websocket
    Connection: Upgrade
    Sec-WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk=
    Sec-WebSocket-Protocol: chat

**3.CORS**  
CORS是一个W3C标准，全称是”跨域资源共享”（Cross-origin resource sharing）。它允许浏览器向跨源(协议 + 域名 + 端口)服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。相比JSONP只能发GET请求，CORS允许任何类型的请求。  
实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信

**基本流程**  
浏览器将CORS请求分成两类：**简单请求（simple request）和非简单请求（not-so-simple request）**。

简单请求:只需要在头信息之中增加一个Origin字段。

非简单请求:会在正式通信之前，增加一次HTTP查询请求，称为”预检”请求（preflight）。浏览器先询问服务器，当前网页所在的域名是否在服务器的许可名单之中，以及可以使用哪些HTTP动词和头信息字段。只有得到肯定答复，浏览器才会发出正式的XMLHttpRequest请求，否则就报错。

只要同时满足以下两大条件，就属于简单请求。
    1) 请求方法是以下三种方法之一：
    HEAD
    GET
    POST
    2）HTTP的头信息不超出以下几种字段：
    Accept
    Accept-Language
    Content-Language
    Last-Event-ID
    Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain

nodejs下的实现方法：

router.get('/getData', function(req, res, next) {   
      //设置允许跨域请求 
      var reqOrigin = req.header("origin");  
      res.header("Access-Control-Allow-Origin", "http://localhost:3000");  
      res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");  
      res.header("Access-Control-Allow-Headers", "Content-Type,Content-Length, Authorization, Accept,X-Requested-With");  
      res.json(200, {name:"张三1",age:40});  
      }

**配置项解释**  
**Access-Control-Allow-Origin**  
该字段必填。它的值要么是请求时Origin字段的具体值，要么是一个\*，表示接受任意域名的请求。

**Access-Control-Allow-Methods**  
该字段必填。它的值是逗号分隔的一个具体的字符串或者\*，表明服务器支持的所有跨域请求的方法。注意，返回的是所有支持的方法，而不单是浏览器请求的那个方法。这是为了避免多次”预检”请求。

**Access-Control-Expose-Headers**  
该字段可选。CORS请求时，XMLHttpRequest对象的getResponseHeader()方法只能拿到6个基本字段：Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。如果想拿到其他字段，就必须在Access-Control-Expose-Headers里面指定。

**Access-Control-Allow-Credentials**  
该字段可选。它的值是一个布尔值，表示是否允许发送Cookie.默认情况下，不发生Cookie，即：false。对服务器有特殊要求的请求，比如请求方法是PUT或DELETE，或者Content-Type字段的类型是application/json，这个值只能设为true。如果服务器不要浏览器发送Cookie，删除该字段即可。

**Access-Control-Max-Age**  
该字段可选，用来指定本次预检请求的有效期，单位为秒。在有效期间，不用发出另一条预检请求。

注意:  
a.所有浏览器都支持该功能，IE浏览器不能低于IE10  
b.CORS请求发送Cookie时，Access-Control-Allow-Origin只能是与请求网页一致的域名。同时，Cookie依然遵循同源政策，只有用服务器域名设置的Cookie才会上传，其他域名的Cookie并不会上传，且（跨源）原网页代码中的document.cookie也无法读取服务器域名下的Cookie。

**4.架设服务器代理**  
浏览器请求同源服务器，再由后者请求外部服务

[70]: /images/20220525/aae691b90c1640b6b9c43f2628d3323c.png