title: 跨域
author: Gamehu
tags:

  - 跨域
categories:
  - 工作
date: 2018-08-20 10:46:00

---



刚好这段时间对接其他产品，刚好处理了一下跨域的问题，借此机会稍微更加了解一下跨域(Cross-origin resource sharing)。

搬运搬运...

#### 首先什么是同源策略？

同源策略是一种Web浏览器安全性机制，旨在防止网站相互攻击。

同源策略限制一个源上的脚本访问另一源的数据。源由URI方案，域和端口号组成。

同源策略是一种限制性的跨域规范，它限制了网站与源域外部资源进行交互的能力。起源于多年前的策略是针对潜在的恶意跨域交互（例如，一个网站从另一个网站窃取私人数据）做出的响应。通常，它允许一个域向其他域发出请求，但不允许访问响应。

同源策略它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。

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

```
1.) Cookie、LocalStorage、IndexedDB 等存储
2.) DOM查询
3.) AJAX 请求
```

但是有三个标签是允许跨域加载资源：

```
<img src=XXX> 

<link href=XXX>

<script src=XXX>
```

#### **常见跨域场景**

```
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、 通过jsonp跨域
2、 iframe跨域
5、 postMessage跨域
6、 跨域资源共享（CORS）
7、 nginx代理跨域
8、 nodejs中间件代理跨域
9、 WebSocket协议跨域



比较抱歉的是我只用过nginx代理跨域、跨域资源共享（CORS）、WebSocket协议跨域...。



#### 什么是CORS（跨域资源共享）？

在大多数情况下，在用户浏览器中运行的脚本仅需要访问源相同的资源（请考虑首先对服务JavaScript代码的同一后端进行API调用）。因此，JavaScript通常无法访问其他来源的资源，这对安全性而言是一件好事。但是有些情况下需要跨域请求的。例如，不同系统间的一些对接。解决该问题就需要实现CORS，跨域资源共享（CORS）是一种浏览器机制，可实现对位于给定域外部的资源的受控访问。

#### CORS如何运作

如果不需要cookie的话，整个`CORS`通信过程都是浏览器自动完成的，前端不需要做额外的编码。**浏览器一旦发现请求跨源，就会自动添加一些附加的头信息，复杂请求还会多一次预检的请求，但我们是不用感知的**。因此，实现`CORS`通信的关键是服务器开启CORS。

{% asset_img b.png %}



#### 参考

{% blockquote KRISTOPHER SANDOVAL https://nordicapis.com/what-is-cors-cross-origin-resource-sharing/ What is CORS %}
{% endblockquote %}

{% blockquote w3c https://www.w3.org/TR/2014/REC-cors-20140116/ Cross-Origin Resource Sharing %}
{% endblockquote %}
{% blockquote 阮一峰 https://www.ruanyifeng.com/blog/2016/04/cors.html 跨域资源共享 CORS 详解 %}
{% endblockquote %}

`本文引用的内容，如有侵权请联系我删除，给您带来的不便我很抱歉。`