跨域请求是什么？如何解决？

参考内容：
JavaScript: Use a Web Proxy for Cross-Domain XMLHttpRequest Calls
别慌，不就是跨域么!
跨域资源共享 CORS 详解
 AJAX请求和跨域请求详解（原生JS、Jquery）
JavaScript跨域总结与解决办法

刚毕业入职，大部分时间还在培训，中间有一段时间的空闲时间，就学习了下 Angular，在学校都是编写的单体应用，所有代码都放在同一个工程下面，到公司使用的是前后端分离了，虽然后端程序也是我自己写的，但是有一些数据是从公司现有接口去拿的，然后就遇到让我纠结了两小时的跨域请求问题，在这里做一个简单的总结输出。

什么是跨域请求

跨域请求问题是浏览器的同源策略造成的，该策略不允许执行其它网站的脚本，是浏览器施加的安全限制。什么是同源？最初是指网页 A 设置的 Cookie 不能被网页 B 打开，包括三个相同：协议、域名、端口。这个同源是从 URL 判断的，不是从 IP 判断的，如果同一个服务器对应连个域名，这两个域名是不同源的。

http://www.nealyang.cn/index.html 调用 http://www.nealyang.cn/server.php 非跨域

http://www.nealyang.cn/index.html 调用 http://www.neal.cn/server.php 跨域,主域不同

http://abc.nealyang.cn/index.html 调用 http://def.neal.cn/server.php 跨域,子域名不同

http://www.nealyang.cn:8080/index.html 调用 http://www.nealyang.cn/server.php 跨域,端口不同

https://www.nealyang.cn/index.html 调用 http://www.nealyang.cn/server.php 跨域,协议不同

localhost 调用 127.0.0.1 跨域

同源政策的目的是为了保护用户信息的安全，防止恶意网站窃取数据，随着互联网的发展，同源政策更加严格了，下面三种行为都会受到限制。

（1） Cookie、LocalStorage 和 IndexDB 无法读取。
（2） DOM 无法获得。
（3） AJAX 请求不能发送。

所有的现代浏览器都对网络连接进行了安全限制，包括 XMLHttpRequest，如果你的 web 应用程序和其使用的数据在同一个服务器，你不会遇到跨域请求问题。但是当你的 web 应用程序和 web 服务数据不在同一个服务器时，就会被浏览器限制连接了。

常用解决方案

对于跨域请求有很多的解决方案，最常用的解决方案是在你的 web 服务器上面设置代理。在设置代理之前就通过，应用程序直接去请求另一个服务器下的数据；设置代理之后，应用程序从自己的 web 服务器中请求数据，再由代理去请求数据，这样 web 服务器拿到数据之后返回给应用程序即可。从浏览器角度看，就是从同一个服务器拿的数据，并没有进行跨域请求。

通俗易懂的说，你家的宠物狗不会吃别家的食物，因为它担心别人的食物会把自己给药死，所以你的狗狗只管找你要食物，你是它的主人，它绝对相信你，而你可以鉴别别人给的食物是不是安全的。类比，小狗就是浏览器，你就是代理。

Angular 中的解决办法

上面所说的解决方案在开发过程中不方便操作，每新发一个接口都到服务器中去配置一下，不仅麻烦而且效率低下。首先说一下在 Angular 中一个人比较常用的解决方法，默认你在使用angular-cli构建你的项目，我们可以创建一个代理配置文件proxy.conf.json（假设你的后端服务的访问地址为10.121.163.10:8080），代理配置文件如下：

{
  "/api": {
    "target": "http://10.121.163.10:8080",
    "secure": false
  }
}

然后修改package.json文件中的启动命令为"start": "ng serve --proxy-config proxy.conf.json"，启动项目时使用npm start即可解决跨域请求问题。

上述解决方案仅在开发时使用，你当然可以使用 tomcat、nginx 配置代理，但是这很麻烦，需要打包代码部署，为了保证效率，我们想写完了立刻测试，同时也不想麻烦做后端的同学，在项目发布时，应该把代理配置到服务器中去；修改启动命令也不是必须的，你也可以选择每次使用 ng serve --proxy-config proxy.conf.json命令启动项目；示例代理配置文件内容可以有更多的属性，可以通过网络查阅相关资料。

后端解决办法

我的后端是是用 tornado 实现的，然后我又写了一个单独的页面用于在大屏幕上展示相关数据，没有用 Angular 了，要通过 AJAX请求数据，又怎么解决跨域请求问题呢？这时就需要设置请求头了，让后端允许跨域请求。

这时需要了解一下简单请求和非简单请求了，简单请求就是只发送一次请求的请求；非简单请求会发送数据之前先发一次请求做预检，通过预检后才能再发送一次请求用于数据传输。

更清晰区别，满足下列两大条件的属于简单请求，而非简单请求就是请求方法为PUT或DELETE，或者 Content-Type字段是application/json的请求。

1.请求方法为 GET、POST、HEAD之一
2.HTTP头信息不超出字段：Accept、Accept-Language、Content-Language、Last-Event-ID、Content-Type，并且 Content-Type 的值仅限于 application/x-www-form-urlencoded、multipart/form-data、text/plain。

对于简单请求，只需要设置一下响应头就可以了。

class TestHandler(tornado.web.RequestHandler):
    def get(self):
        self.set_header('Access-Control-Allow-Origin', "*")
        # 可以把 * 写成具体的域名
        self.write('cors get success')

对于复杂请求，需要设置预检方法，如下所示：

class CORSHandler(tornado.web.RequestHandler):
    # 复杂请求方法put
    def put(self):
        self.set_header('Access-Control-Allow-Origin', "*")
        self.write('put success')
    # 预检方法设置
    def options(self, *args, **kwargs):
        #设置预检方法接收源
        self.set_header('Access-Control-Allow-Origin', "*")
        #设置预复杂方法自定义请求头h1和h2
        self.set_header('Access-Control-Allow-Headers', "h1,h2")
        #设置允许哪些复杂请求方法
        self.set_header('Access-Control-Allow-Methods', "PUT,DELETE")
        #设置预检缓存时间秒,缓存时间内发送请求无需再预检
        self.set_header('Access-Control-Max-Age', 10)

Guanngxu