js 跨域请求原理及常见解决方案

一、同源策略：

说到跨域请求，首先得说说同源策略：

1995年，同源政策是由 Netscape 公司引入浏览器的。目前，所有浏览器都实行了这个政策。

同源策略是浏览器的一种安全策略，所谓同源是指，域名，协议，端口完全相同；目的就是为了保证用户信息的安全，防止恶意的网站窃取数据，防范跨站脚本的攻击，禁止客户端脚本（如 JavaScript）对不同域的服务进行跨站调用。

同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。

举例来说，http://www.example.com/dir/page.html 这个网址
协议是 http://
域名是 www.example.com
端口是 80（默认端口可以省略）
它的同源情况如下：
同源：
http://www.example.com/dir2/other.html
不同源：
http://example.com/dir/other.html：不同源（域名不同）
http://v2.www.example.com/dir/other.html：不同源（域名不同）
http://www.example.com:81/dir/other.html：不同源（端口不同）

二、跨域请求：

所谓的跨域访问或者跨域请求，就是是指通过 js 在不同的域之间进行数据传输或通信，比如用ajax向一个不同的域请求数据，或者通过js获取页面中不同域的框架中(iframe)的数据。只要协议、域名、端口有任何一个不同，都被当作是不同的域。

但不一定是浏览器限制了发起跨站请求，也可能是跨站请求可以正常发起，但是返回结果被浏览器拦截了。

三、跨域解决的常用方法：

项目中常用的两种解决方案主要是：JSONP、CORS及nginx。

1、JSONP：

基本思想就是：网页通过添加一个<script src=‘’>元素，向服务器请求JSON数据（<script> 的src属性获得js代码，不受同源政策限制）。服务器收到请求后，将数据放在一个指定名字的回调函数里传回来。

注：用 JSONP 获取的不是 JSON 数据，而是可以直接运行的 JavaScript 语句。由于script脚本只可以通过get发送请求，所以jsonp这种方法只可以发送get请求，无法发送post请求。

具体做法：使用jQuery封装的Ajax，只需在客户端的Ajax请求的url中加入url?callback=?即可；

　　　　　服务器端需写入var callback = req.query.callback；返回的value需要封装成json，res.send(callback+'('+json+')')。

2、CORS（Cross-Origin Resource Sharing）：

跨域资源共享是一份浏览器技术的规范，以避开浏览器的同源策略，是 JSONP 模式的现代版。

CORS背后的思想，就是使用自定义的HTTP头部让浏览器与服务器进行沟通，从而决定请求或响应是应该成功，还是应该失败。

与 JSONP 不同，CORS 除了 GET 要求方法以外也支持其他的 HTTP 要求。用 CORS 可以让前端工程师用一般的 XMLHttpRequest，这种方式的错误处理比 JSONP 要来的好；另一方面，JSONP 可以在不支持 CORS 的老旧浏览器上运作。现代的浏览器都支持 CORS。

具体做法：客户端不需要做什么，只需要在服务器端发送一个响应头即可：‘Access-Control-Allow-Origin’；

　　　　如若允许所有域访问：Access-Control-Allow-Origin: *；如：header("Access-Control-Allow-Origin: *")；

　　　　　如若只允许指定域访问：Access-Control-Allow-Origin: 域名A；如：header("Access-Control-Allow-Origin: http://www.test2.com");

3. nginx：

Nginx是一个高性能的 HTTP 和反向代理服务器，也是一个 IMAP/POP3/SMTP 服务器，是一款轻量级的 Web 服务器/反向代理服务器及电子邮件（IMAP/POP3）代理服务器。由于浏览器有同源策略，导致不能跨域接收或发请求，但服务器与服务器之间的通信是没有限制的，所以可以理解为，nginx 与服务器通信后，将请求转发回浏览器。

首先，nginx在启动时，会解析配置文件，得到需要监听的端口与ip地址，然后在nginx的master进程里面，先初始化好这个监控的socket(创建socket，设置addrreuse等选项，绑定到指定的ip地址端口，再listen)，再fork(一个现有进程可以调用fork函数创建一个新进程。由fork创建的新进程被称为子进程)出多个子进程出来，子进程会竞争accept新的连接。此时，客户端就可以向nginx发起连接了。

当客户端与nginx进行三次握手，与nginx建立好一个连接后，某一个子进程会accept成功，得到这个建立好的连接的socket，然后创建nginx对连接的封装，即ngx_connection_t结构体。接着，设置读写事件处理函数并添加读写事件来与客户端进行数据的交换。

最后，nginx或客户端来主动关掉连接，到此，一个连接就完成了。