什么是跨域，后端工程师如何处理跨域

什么是跨域

前言

作为一名后端开发工程师，在给前端同事写接口的时候，经常碰到他们讲，你的接口跨域了，那么什么是跨域，这里来研究下。

什么是跨域

先来看下跨域的定义

跨域的广义定义：跨域是指一个域下的文档或脚本试图去请求另一个域下的资源。

我们经常遇到的跨域是由浏览器同源策略限制的一类请求场景。

栗如，下面的请求就发生了跨域，在京东的 H5 页面中请求淘宝的接口

上面栗子中跨域最终的罪魁祸首就是浏览器的同源策略。

1、因为上面的 域名 不相同，所以请求的接口被认为是非同源。

2、同时出于安全性，浏览器限制脚本内发起的跨源 HTTP 请求。 例如， XMLHttpRequest 和 Fetch API 遵循同源策略。所以上面的请求就报了跨域的错误。

同源策略

什么是同源策略

同源策略/SOP （Same origin policy） 是一种约定，由 Netscape 公司1995年引入浏览器。

同源策略是指在 Web 浏览器中，允许某个网站脚本访问另一个网站的数据，但前提是这两个网站必须满足三个相同:

1、协议相同；

2、域名相同；

3、端口相同；

一旦两个网站满足上述条件，这两个网站就被认定为具有相同来源。

非同源的限制条件

如果两个网站非同源，将受到下面的几种限制

1、Cookie、LocalStorage 和 IndexDB 无法读取；

2、DOM 无法获得；

3、AJAX 请求不能发送。

同源策略的目的

同源政策的目的，是为了保证用户信息的安全，防止恶意的网站窃取数据。

栗如：Cookie 中存了一些用户的登陆信息，如果没有同源策略的限制，那么任何网站都能访问 Cookie，用户的信息就会泄露了，就能伪造用户信息登陆目标网站了，这显然是有很大的安全隐患的。

如何处理跨域

因为非同源有上面三种限制，这种能够规避一定的安全问题，但是有时候我们正常的使用也受到了影响，所以有时候我们需要想办法规避这种限制。

非同源限制中的

1、Cookie、LocalStorage 和 IndexDB 无法读取；

2、DOM 无法获得；

这里就不展开讨论了，这种只需要在前端页面中进行调整就行了，这里重点关注下有和后端交互的 3、AJAX 请求不能发送 的这种限制。

处理 AJAX 非同源的限制

同源政策规定，AJAX 请求只能发给同源的网址，否则就报错。

除了架设服务器代理（浏览器请求同源服务器，再由后者请求外部服务），有三种方法规避这个限制。

1、JSONP

2、WebSocket

3、CORS

关于 WebSocket 和 JSONP 的处理参见 浏览器同源政策及其规避方法

作为服务端开发，对于 CORS 使用的比较多，这里展开讨论下

CORS

CORS 是一个 W3C 标准，全称是”跨域资源共享”（ Cross-origin resource sharing ）。

它允许浏览器向跨源服务器，发出 XMLHttpRequest 请求，从而克服了 AJAX 只能同源使用的限制。

跨源资源共享 (CORS)（或通俗地译为跨域资源共享）是一种基于 HTTP 头的机制，该机制通过允许 服务器 标示除了它自己以外的其它 origin（域，协议和端口），使得浏览器允许这些 origin 访问加载自己的资源。跨源资源共享还通过一种机制来检查服务器是否会允许要发送的真实请求，该机制通过浏览器发起一个到服务器托管的跨源资源的”预检”请求。在预检中，浏览器发送的头中标示有 HTTP 方法和真实请求中会用到的头。

实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。

CORS 的使用的关键在服务端，浏览器发送请求，服务端接收到客户端请求做一些判断（请求方是否在自己的“白名单”里？），如果没问题就返回数据，否则拒绝。

浏览器将 CORS 请求分成两类：

简单请求（simple request）

非简单请求（not-so-simple request）

简单请求（simple request）

某些请求不会触发 CORS 预检请求。这样的请求为“简单请求”，只要同时满足下面的两大条件就是简单请求。

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

简单请求基本流程

简单请求没有预检的流程，所以浏览器只会发送一次请求，发出的 CORS 请求，头信息中会有一个 Origin 字段。

<pre class="prettyprint hljs http" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, &quot;Courier New&quot;, monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: