谈谈跨域那些事

浏览器中的HTTP请求

XHR对象用于与服务器交互。通过XMLHttpRequest可以在不刷新页面的情况下请求特定URL，获取数据。
XMLHttpRequest在AJAX编程中被大量使用。

Fetch API提供了一个获取资源的接口（包括跨域请求）

Asynchronous JavaScript And XML，是一种使用XMLHttpRequest技术构建更复杂，动态的网页的编程实践。大部分的ajax其实就是对XMLHttpRequest的相关API进行封装，使其使用起来更加方便。

跨域，顾名思义，跨越区域。大概意思为访问的网站请求非同源资源。

当前页面URL	被请求资源URL	跨域	原因
http://www.test.com	http://www.test.com/api/users	否	同源(协议域名端口号相同)
http://www.test.com	https://www.test.com/api/users	是	协议不同(http/https)
http://www.test.com	http://www.baidu.com/api/users	是	主域名不同(test/baidu)
http://www.test.com	http://blog.test.com/api/users	是	子域名不同(www/blog)
http://www.test.com:8080	http://www.test.com:7070/api/...	是	端口号不同(8080/7070)

遇事先问为什么。所以，浏览器为什么要设置跨域的限制，然后我们后面还要费心费力地消除跨域的限制。

为了web生态的安全。看一个例子：

假设浏览器里面的代码可以随意访问第三方的数据（非同源），那么你可以让你的代码定时轮询访问一个非同源的网页，假设某个时刻恰好有10万人在访问你的网页，那这个第三方的网页每秒就要承受10万的并发量，这样网络中大量的带宽就会被这样白白的浪费掉，整个web生态将会混乱无比。

当访问的网站需要请求非同源资源时，浏览器将拒绝这些非同源请求。在这种情况下，我们需要解决浏览器跨域时拒绝请求非同源资源的限制。

当浏览器出现跨域时，那就不可避免的引出两个关键的概念了。简单请求和非简单请求。

当跨域产生时，非简单请求会在真正向服务端发送请求前进行预检请求（OPTIONS），。

1、条件定义：若请求满足以下所有的条件，则请求可视为简单请求。

使用下列方法之一：
GET
HEAD
POST
请求首部字段不得超出以下集合
Accept
Accept-Language
Content-Language
Conent-Type：text/plain || multipart/form-data || application/x-www-form-urlencoded
DPR
Downlink
Save-Data
Viewport-Width
Width
请求中的任意XMLHttpRequestUpload 对象均没有注册任何事件监听器
请求中没有使用 ReadableStream 对象

1、条件定义：若请求满足下列任一条件时，即应首先发送预检请求（options）。

使用了下面的任一方法：
PUT
DELETE
CONNECT
OPTIONS
TRACE
PATCH
设置了额外的请求首部字段（除去以下集合中的）
Accept
Accept-Language
Content-Language
Conent-Type：text/plain || multipart/form-data || application/x-www-form-urlencoded
DPR
Downlink
Save-Data
Viewport-Width
Width
请求中的XMLHttpRequestUpload 对象注册了任意多个事件监听器
请求中使用了ReadableStream对象

JSON with Padding，是JSON的一种使用模式，可以让网页从别的网域获取资料。由于同源策略，一般来说位于server1.example.com的网页无法与不是server1.example.com的服务器沟通，而HTML的