前端面试常见问题之跨域_使用内网ip就正常,使用域名就被cors拒绝

前端面试常见问题之跨域

一、同源策略
什么是同源策略？？？
同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。所谓同源，就是指两个页面具有相同的协议，主机（也常说域名），端口，三个要素缺一不可
为什么会有同源？？？
同源策略主要是为了保护cookie，因为HTTP协议无状态，想要服务端记住客户端，则可以通过cookie和session机制，这样客户端请求的报文cookie中携带的sessionid就是客户端在服务器的标识。JavaScript可以跨域读取到cookie。同源策略不允许跨域发送cookie
同源策略的限制

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

二、跨域

跨域就读取的实现
跨域分为：

• 跨域源数据存储

• Cookie跨域

• 跨窗口的跨域通信

• XMLHttpRequest的跨域

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

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

常见的跨域场景：

 URL                                      说明                    是否允许
        http://www.domain.com/a.js
        http://www.domain.com/b.js         同一域名，不同文件或路径           允许
        http://www.domain.com/lab/c.js
        http://www.domain.com:8000/a.js
        http://www.domain.com/b.js         同一域名，不同端口                不允许
         
        http://www.domain.com/a.js
        https://www.domain.com/b.js        同一域名，不同协议                不允许
         
        http://www.domain.com/a.js
        http://192.168.4.12/b.js           域名和域名对应相同ip              不允许
         
        http://www.domain.com/a.js
        http://x.domain.com/b.js           主域相同，子域不同                不允许
        http://domain.com/c.js
         
        http://www.domain1.com/a.js
        http://www.domain2.com/b.js        不同域名                         不允许
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

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

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

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

简单请求

对于简单请求，浏览器直接发出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的静态资源服务器中加入以下配置。

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

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