跨域请求和同源策略

1. 同源策略

1.1. 介绍

同源策略是一种安全机制，限制了从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。

“源” 指：协议(http/https)、主机名（域名）和端口号。这3个有一个不同，就不是同源。

子域名不同，也不是同源，比如a.baidu.com和b.baidu.com不是同源。

1.2. 同源策略的作用

确保浏览器的安全环境，防止恶意网站窃取用户数据、不同源的资源之间的混乱交互。

1.3. 限制范围

• Cookie、LocalStorage和IndexedDB等存储机制受到同源策略限制。不同源的网页不能读取或修改彼此的这些存储内容。
• DOM（文档对象模型）访问受同源策略限制。一个网页中的JavaScript不能访问另一个不同源网页的DOM。
• ajax请求受到同源策略的限制。默认情况下，ajax只能访问同源的资源。

2. 跨域请求

2.1. 介绍

一个网页中的脚本尝试向不同源的服务器发起请求时，就称为跨域请求。例如，网页http://a.com中的脚本向http://b.com发起的请求就是跨域请求。

2.2. 实现方式

2.2.1. CORS（跨源资源共享）

允许服务器通过在响应头中设置特定的字段来告诉浏览器允许来自不同源的请求。

例如，服务器可以设置Access-Control-Allow-Origin响应头来指定允许访问的源。

如果浏览器检测到响应头中包含了允许当前源访问的信息，就会允许该跨域请求成功。

2.2.2. JSONP

利用<script>标签的跨域请求方法。

浏览器允许<script>标签加载不同源的脚本，可以通过动态创建<script>标签并设置其src属性为跨域的 URL，服务器返回一个包含函数调用的JavaScript代码，函数的参数是要返回的数据。当脚本加载完成后，这个函数就会被调用，从而实现跨域数据获取。但JSONP只支持GET请求，且存在安全风险。

2.2.3. 代理服务器

在同源的服务器上设置一个代理，由代理服务器向不同源的服务器发起请求，然后将响应返回给客户端。

3. 同源策略和跨域请求的关系

• 同源策略是跨域请求面临阻碍的根本原因
• 跨域请求对同源策略的突破尝试

由于同源策略，浏览器会阻止网页中的脚本向不同源的服务器发起请求。这是为了保护用户的隐私和安全，防止恶意网站通过跨域请求窃取用户数据或进行其他恶意行为。