CORS跨域 实践

本文首发于个人微信公众号《andyqian》，期待你的关注~

前言

  系统通常都是由单体应用逐渐演化而来，演化成为前后端分离的分布式应用。在享受分布式系统带来的诸多好处之时，随之而来的也有不少新的问题。其中跨域问题就成了第一只拦路虎。今天我们就来揭露一下这只老虎的真面目!

什么是跨域?

  在解决问题前，我们首先得先了解什么是跨域？其实我们可以简单的理解跨域就是跨不同的”域名”。但这个域名比我们通常理解中的域名范围更广泛一些。在这里用 “非同源访问” 可能更合适一些。那么同源又是什么呢？

同源为: 相同协议，相同域名，相同端口。

早在1995年，同源政策由 Netscape 公司引入浏览器。目前，所有浏览器都实行这个政策。其引入的目的是为了保证用户信息的安全，防止恶意的网站窃取数据。

例如：http://www.andyqian.com  其中：

1. http 为协议，常用的有http和https协议。

2. www.andyqian.com为域名。

3. 端口为80。(默认端口省略)。

    

基于上面的定义。我们来判断一下下面表格中，哪些属于同源，哪些不属于同源。以下述链接为例：

http://www.andyqian.com

URL	是否同源	原因
https://www.andyqian.com	否	协议不同
http://tech.andyqian.com	否	域名不同
http://www.andyqian.com:8080	否	端口
http://www.andyqian.com/a/	是	协议，域名，端口均一致

其交互方式，如下图所示:

CORS中的两种请求

  通过上面的介绍，我们已经知道同源的概念，以及跨域是怎么回事。现在我们继续说说，如何解决跨域问题。其实根据同源政策规定，AJAX请求只能发给同源的网址，否则就报错。在日常中，通常我们通过代理服务器以及CORS（Cross-Origin Resource Sharing）跨源资源分享来解决。浏览器中通常将CORS分为简单请求以及复杂请求。

简单请求：

1. 简单请求只支持: GET，POST，PUT请求方法。

2. 除了用户设置的代理请求头外(Content，User-Agent)，仅支持以下请求头：

   Accept
   Accept-Language
   Conte