1 为什么浏览器禁止跨域请求？
出于安全原因，浏览器限制从脚本内发起的跨源HTTP请求。 例如：XMLHttpRequest 和 Fetch API 发起的请求都遵循同源策略。这意味着使用这些 API 的 Web应用程序只能从加载应用程序的同一个域请求 HTTP 资源，除非对方服务器发来的响应报文中设置了正确的 CORS 响应头。
避免跨站请求伪造（CSRF）攻击：假设用户登录并访问正常网站A（诸如某银行网站），A生成 Cookies 信息并返回给用户的浏览器来保持网站A的登录状态。然后在同一个浏览器窗口的新Tab页进入恶意网站B，B网站的恶意代码被执行，要求跨域请求A网站的某些资源（诸如转账功能）。浏览器响应该请求，在用户不知情的情况下浏览器自动携带 Cookies 信息并向A发出请求。A根据用户的 Cookies 信息核实用户身份并处理该请求，那么来自网站B的恶意请求就会被执行。
2 如何产生跨域请求？
若请求的目标URL的协议、域名、端口中的任意一个与当前URL的不同，即为跨域请求。请求域名和直接请求该域名对应的IP之间也算跨域。
3 跨域请求的解决方案
3.1 JSONP
JSONP(JSON with Padding) 是 json 的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。JSONP是一种传统的、非官方的跨域解决方案，源于浏览器允许一些带src属性的标签进行跨域，例如：<iframe>、<script>、<img>、<link>等HTML标签。而JSONP即是利用了<script>标签能够加载外部脚本的功能，但是这种方式只支持GET请求。
3.2 CORS
跨域资源共享（CORS) 是一种机制，它使用额外的 HTTP 响应头来告诉浏览器，让运行在一个 origin (domain) 上的Web应用被准许访问来自不同源服务器上的指定的资源。另外，规范要求，对那些可能对服务器数据产生副作用的 HTTP 请求方法（特别是 GET 以外的 HTTP 请求，或者搭配某些 MIME 类型的 POST 请求），浏览器必须首先使用 OPTIONS 方法发起一个预检请求（Preflight Request），从而获知服务端是否允许该跨域请求。服务器确认允许之后，才发起实际的 HTTP 请求。在预检请求的响应头中，服务器端也可以通知客户端，是否允许携带身份凭证（包括 Cookies 和 HTTP 认证相关数据）。
3.2.1 简单请求
若一个请求同时满足以下条件，那么则为简单请求
-
请求方法为GET、POST、HEAD其中之一。
-
除了被浏览器自动设置的请求头,没有去增加额外的请求头信息，即没有增加自定义的请求头。
-
请求头中的 Content-Type 值为:
application/x- www-form-urlencoded（使用 HTTP 的 POST 方法提交的表单）、
multipart/form-data（同上，但主要用于表单提交时伴随文件上传的场合）、
text/plain（纯文本）
其中之一。 -
请求中没有使用 ReadableStream 对象。
-
请求中的任意 XMLHttpRequestUpload 对象均没有注册任何事件监听器。
-
注意: WebKit Nightly 和 Safari Technology Preview 为Accept, Accept-Language, 和 Content-Language 首部字段的值添加了额外的限制，详见：讨论1，讨论2，讨论3。
当你使用 XMLHttpRequest 发送跨域请求时，浏览器的通信过程大致如下：浏览器发现该请求不符合同源策略，会自动给该请求加一个请求头Origin: xxx(当前域名)，后台根据业务需要，如果确定接受该请求则在返回结果中加入一个响应头：Access-Control-Allow-Origin: Origin的值或*php代码示例： header('Access-Control-Allow-Origin: http://arunranga.com')浏览器判断Access-Control-Allow-Origin该相应头中是否包含Origin的值，如果有则浏览器会处理响应，我们就可以拿到响应数据，返回Access-Control-Allow-Origin等以Access-Control-开头的响应头以及请求的资源。否则返回403状态码，且不会返回请求的资源，这时我们无法拿到响应数据。另外，大多数浏览器不支持针对于预检请求的重定向。如果一个预检请求发生了重定向，浏览器将报告错误。3.2.2 预检请求
不为简单请求的跨域请求均为非简单请求。与前述简单请求不同，浏览器会自动使用 OPTIONS 方法先发起一个预检请求到服务器，以获知服务器是否允许该实际请求。预检请求的使用，可以避免跨域请求对服务器的用户数据产生未预期的影响。OPTIONS 请求头部中会包含以下头部：Origin、Access-Control-Request-Method、Access-Control-Request-Headers，发送这个请求后，服务器可以设置如下头部与浏览器沟通来判断是否允许这个请求：Access-Control-Allow-Origin、Access-Control-Allow-Method、Access-Control-Allow-Headers、Access-Control-Allow-Credentials、Access-Control-Max-Age。
3.2.3 带凭证的请求
带凭证的请求,是将Cookies和HTTP认证信息一起发送出去的跨域请求。根据请求方式，可以是简单请求或预检请求。
XMLHttpRequest 或 Fetch 与 CORS 的一个有趣的特性是，可以基于 HTTP cookies 和 HTTP 认证信息发送身份凭证。一般而言，对于跨域 XMLHttpRequest 或 Fetch 请求，浏览器不会发送身份凭证信息。如果要发送凭证信息，需要手动设置 XMLHttpRequest 的某个特殊标志位。 比如将 XMLHttpRequest 的 withCredentials 标志设置为 true，从而向服务器发送 Cookies。对于简单的 GET 请求，浏览器不会对其发起“预检请求”。但是，如果服务器端的响应中未携带 Access-Control-Allow-Credentials: true ，浏览器将不会把响应内容返回给请求的发送者。 有一点需注意，在带凭据请求中Access-Control-Allow-Origin不能为*，只能为请求头中指定的Origin值。
4 常见的请求头与响应头
4.1 请求头 (Request Header)
这些首部字段无须手动设置。 当开发者使用 XMLHttpRequest 对象发起跨域请求时，它们已经被设置就绪。
Origin: 表明预检请求或实际请求的源站。origin 参数的值为源站 URI。它不包含任何路径信息，只是服务器名称。
有时候将该字段的值设置为空字符串是有用的，例如，当源站是一个 data URL 时。在所有访问控制请求（Access control request）中，Origin 首部字段总是被发送。
Access-Control-Request-Method: 用于预检请求。其作用是，将实际请求所使用的 HTTP 方法告诉服务器。
Access-Control-Request-Headers: 用于预检请求。其作用是，将实际请求所携带的首部字段告诉服务器。
4.1 响应头 (Response Header）
Access-Control-Allow-Origin: 参数的值指定了允许访问该资源的外域 URI。对于不需要携带身份凭证的请求，服务器可以指定该字段的值为通配符*，表示允许来自所有域的请求。例如，下面的字段值将允许来自 mozilla.com 的请求：Access-Control-Allow-Origin: http://mozilla.com。如果服务端指定了具体的域名而非*，那么响应首部中的 Vary 字段的值必须包含 Origin。这将告诉客户端：服务器对不同的源站返回不同的内容。
Access-Control-Expose-Headers: 在跨域访问时，XMLHttpRequest 对象的 getResponseHeader()方法只能拿到一些最基本的响应头：Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma，如果要访问其他头，则需要服务器设置本响应头，让服务器把允许浏览器访问的头放入白名单。例如：Access-Control-Expose-Headers: X-My-Custom-Header, X-Another-Custom-Header，这样浏览器就能够通过 getResponseHeader() 访问X-My-Custom-Header和 X-Another-Custom-Header 响应头了。
Access-Control-Max-Age: 头指定了预检请求的结果能够被缓存多久。例如：Access-Control-Max-Age: 7200表示preflight预检请求的结果在7200秒内有效。在有效时间内，浏览器无须为同一请求再次发起预检请求。请注意，浏览器自身维护了一个最大有效时间，如果该首部字段的值超过了最大有效时间，将不会生效。
Access-Control-Allow-Credentials: 头指定了当浏览器的 credentials 设置为 true 时是否允许浏览器读取response响应的内容。当用在对 preflight 预检测请求的响应中时，它指定了实际的请求是否可以使用 credentials 。请注意：简单 GET 请求不会被预检；如果对此类请求的响应中不包含该字段，这个响应将被忽略掉，并且浏览器也不会将相应内容返回给网页。
Access-Control-Allow-Methods: 首部字段用于预检请求的响应。其指明了实际请求所允许使用的 HTTP 方法。
Access-Control-Allow-Headers: 首部字段用于预检请求的响应。其指明了实际请求中允许携带的首部字段。
