盒子
盒子
文章目录
  1. 同源策略
  2. 二、跨域
  3. 三、常见的解决跨域的方案
  4. 四、CORS
    1. 简单请求
    2. 复杂请求
  5. Nginx代理跨域

跨域问题

同源策略

​ 同源策略是一种约定。同源是指”协议+域名+端口”三者相同,就算两个不同的域名指向同一个ip地址,也不属于同源。

​ 同源策略限制以下几种行为:

  • Cookie、LocalStorage和indexDB无法读取
  • DOM节点无法读取和设置
  • AJAX请求不能发送

为什么要使用同源策略?同源策略主要是来防止CSRF攻击的,CSRF攻击是指利用用户的登陆状态发起恶意请求。但是同源策略并不能完全防止CSRF。

二、跨域

​ 跨域是指浏览器允许向服务器发送跨域请求,从而克服Ajax只能同源使用的限制。

​ 常见的跨域场景:

  • 同一域名,不同文件或路径、不同端口、不同协议
  • 域名和域名对应相同ip、主域相同但子域不同
  • 不同域名

三、常见的解决跨域的方案

1、JSONP跨域

2、nodejs中间件代理跨域

3、document.domain + iframe跨域

4、location.hash + iframe跨域

5、window.name + iframe跨域

6、postMessage跨域

7、WebSocket协议跨域

8、跨域资源共享(CORS)

9、Nginx代理跨源

四、CORS

​ CORS是一个W3C标准,它允许浏览器向跨源服务器,发出XMLHTTPRequest请求,从而克服了AJAX只能同源使用的限制。

​ CORS跨域请求分为简单请求和非简单请求。

​ 满足两个条件之一就属于简单请求:

  • 使用head、get、或post
  • 请求的Header是Accept、Accept-Language、Content-Language、Content-Type只限于三个值:application/x-www-form-urlencoded、multipart/form-data、text/plain

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

简单请求

​ 对于简单请求,浏览器直接发出CORS请求。简单来说,就是直接在头信息中添加一个Origin字段,用来说明本次请求来自哪个源(协议+域名+端口)。服务器根据这个值决定是否同意这次请求。

​ CORS请求设置的响应头字段,都以Access-Control-开头。

复杂请求

​ 非简单请求是那种对服务器有特殊要求的请求,比如请求方法是put或delete,或者Content-Type字段的类型是application/json。非简单请求 的CORS请求,会在正式通信之前,增加一次HTTP查询请求,称为“预检”请求。

​ 预检请求用的方法是OPTIONS,表示这个请求是用来询问的。请求头信息里,关键字段是Origin,表示这个请求来自哪个源。除了Origin字段,预检请求的头信息包括两个特殊字段。

  • Access-Control-Request-Method:必选

    用来列出浏览器的CORS请求会用到哪些HTTP方法。

  • Access-Control-Request-Headers:可选

    该字段是一个逗号分隔的字符串,指定浏览器CORS请求会额外发送的头信息字段。

Nginx代理跨域

​ Nginx代理跨域实质和CORS跨域原理一样,通过配置文件设置请求响应头等字段。

​ Nginx配置解决iconfont跨域,在Nginx的静态资源服务器中加入以下配置。

1
2
3
location / {
add_header Access-Control-Allow-Origin *;
}

​ Nginx反向代理接口跨域。通过Nginx配置一个代理服务器域名(与domain1相同,端口不同)做跳板机,反向代理访问domain2接口,并且可以顺便修改cookie中的domain信息,方便当前域cookie写入,实现跨域访问。

个人微信公众号

欢迎关注公众号
扫码关注我的微信公众号-大前端合集
  • 微信公众号-大前端合集