前端跨域问题

什么是跨域问题

  同源策略是指协议相同、域名相同、端口相同。

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：不同源（端口不同）

为什么会有跨域请求

  同源政策的目的，是为了保护用户的信息安全，放置恶意的网站窃取数据

在没有同源策略的情况下。当用户在同一个浏览器内，银行和一个恶意网站，在没登出时，恶意网站可以通过脚本请求至银行网站，浏览器自动把银行的登陆cookie带上，从而获取到用户的敏感信息，这个过程恶意站根本不需要直接获取银行站的cookie。由于浏览器的无作为，恶意站的这种操作跟用户自己点击是一样的。

跨域请求的解决方案

CORS

  CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。

1. CORS需要浏览器和服务器同时支持。目前浏览器都支持，IE浏览器要IE10以上。
2. 整个CORS通信的过程，都是浏览器自动完成，不需要用户参与。
3. CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。
4. 实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。

两种请求

  历史上表单一直可以发出跨域请求。AJAX 的跨域设计就是，只要表单可以发，AJAX 就可以直接发。凡是不同时满足下面两个条件，就属于非简单请求。

（1) 请求方法是以下三种方法之一：

• HEAD
• GET
• POST

（2）HTTP的头信息不超出以下几种字段：

• Accept
• Accept-Language
• Content-Language
• Last-Event-ID
• Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain

简单请求

对于简单请求，浏览器直接发出CORS请求。具体来说，就是在头信息之中，增加一个Origin字段。

非简单请求

  非简单请求是那种对服务器有特殊要求的请求，比如请求方法是PUT或DELETE，或者Content-Type字段的类型是application/json。

  非简单请求的CORS请求，会在正式通信之前，增加一次HTTP查询请求，称为"预检"请求（preflight）。

  浏览器先询问服务器，当前网页所在的域名是否在服务器的许可名单之中，以及可以使用哪些HTTP动词和头信息字段。只有得到肯定答复，浏览器才会发出正式的XMLHttpRequest请求，否则就报错。

与JSONP的比较

  CORS与JSONP的使用目的相同，但是比JSONP更强大。

  JSONP只支持GET请求，CORS支持所有类型的HTTP请求。JSONP的优势在于支持老式浏览器，以及可以向不支持CORS的网站请求数据。

JSONP

  JSONP是服务器与客户端跨源通信的常用方法。最大特点就是简单适用，老式浏览器全部支持，服务器改造非常小。

  它的基本思想是，网页通过添加一个<script>元素，向服务器请求JSON数据，这种做法不受同源政策限制；服务器收到请求后，将数据放在一个指定名字的回调函数里传回来。

代理服务器

  通过Nginx搭建前端代理服务器。
通常设置

//9简单请求跨域
Access-Control-Allow-Origin: *.test.com
Access-Control-Allow-Credentials: true


//预检请求过程
//当需要支持跨域的请求不是简单请求时，需特殊处理预检请求所发起的OPTIONS请求
set $cors '';
if ($http_origin ~* 'https?://(localhost|www\.example\.com|m\.example\.com)') {
        set $cors 'true';
}

if ($cors = 'true') {
        add_header 'Access-Control-Allow-Origin' "$http_origin";
        add_header 'Access-Control-Allow-Credentials' 'true';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'Accept,Authorization,Cache-Control,Content-Type,DNT,If-Modified-Since,Keep-Alive,Origin,User-Agent,X-Mx-ReqToken,X-Requested-With';
}

if ($request_method = 'OPTIONS') {
        return 204;
}

参考：
跨域资源共享 CORS 详解-阮一峰
浏览器同源政策及其规避方法-阮一峰