SPA（单页面应用）之 跨域 和 跨域SESSION的解决方案
前言
单页应用（Single Page Application）越来越受web开发者欢迎，单页应用的体验可以模拟原生应用，一次开发，多端兼容。单页应用并不是一个全新发明的技术，而是随着互联网的发展，满足用户体验的一种综合技术。
单页应用的优点
- 更好的用户体验，让用户在web感受natvie的速度和流畅；
- 经典MVC开发模式，前后端各负其责。
- 一套Server API，多端使用（web、移动APP等）
- 重前端，业务逻辑全部在本地操作，数据都需要通过AJAX同步、提交；
架构图
架构设计.png
上述架构是在web中常用的。
为了分离业务，机构部署中畅会用来以下的域名做部署
- www.domain.com 前端应用
- api.domain.com API服务器
- admin.domain.com 后台管理服务器
- imgx.domain.com x表示数字，如img1 img2
同源策略
显而易见，这样的架构会受到浏览器同源策略的限制。
1995年，同源政策由 Netscape 公司引入浏览器。目前，所有浏览器都实行这个政策。
最初，它的含义是指，A网页设置的 Cookie，B网页不能打开，除非这两个网页“同源”。所谓“同源”指的是”三个相同“。
- 协议相同
- 域名相同
- 端口相同
随着互联网的发展，“同源政策”越来越严格。目前，如果非同源，共有三种行为受到限制。
（1） Cookie、LocalStorage 和 IndexedDB 无法读取。
（2） DOM 无法获得。
（3） AJAX 请求不能发送。
方案
同源政策规定，AJAX请求只能发给同源的网址，否则就报错。
除了架设服务器代理（浏览器请求同源服务器，再由后者请求外部服务），有三种方法规避这个限制。
- JSONP
- WebSocket
- CORS
jsonp优点 支持低版本浏览器，缺点是需要服务端写额外的代码。
WebSocket 使用ws协议，和常见的http https不同。
CORS
CORS是一个W3C标准，全称是“跨域资源共享”（Cross-origin resource sharing）。
它允许浏览器向跨源服务器，发出XMLHttpRequest
请求，从而克服了AJAX只能同源使用的限制。
CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。
整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。
因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。
运行跨域AJAX
在这里我们仅仅需要设置
Access-Control-Allow-Origin: *
Access-Control-Allow-Credentials: true
#如果要指定域名
Access-Control-Allow-Origin: http://www.baidu.com
Access-Control-Allow-Credentials: true
这段代码我们可以直接在api.domain.com服务端代码中设置,
header('Access-Control-Allow-Origin:*');
header('Access-Control-Allow-Credentials: true');
这样我们就位于www.domain.com的AJAX请求，就能正常的请求了。
但是这样子也会出现一个问题。如果服务端接口出现了BUG。那么这个时候程序会执行到Header设置，这个时候，这个header头未能正常返回，那么浏览器端又会抛出一个xhr的异常
XMLHttpRequest cannot load http://api.domain.com.
Origin http://api.domain.com is not allowed by Access-Control-Allow-Origin.
所有最后我们选择将这个参数在apache中开启
#需要启用 header_set模块
Header set Access-Control-Allow-Origin *
Header set Access-Control-Allow-Credentials true
这样子不管代码是否异常，前端的请求都能拿到正常的响应了。
SESSION的解决方案
在一般app应用中，保持用户的登录状态，一般是用Token令牌，而Vue这种web APP我更倾向于用session来保持用户会话。
那我们要如何来让AJAX使用session呢
#1.允许客户端发送cookie
Access-Control-Allow-Credentials: true
#2. api.domain.com 设置cookie domain 为 .domain.com
#3 客户端打开发送Cookie
var xhr = new XMLHttpRequest();
xhr.withCredentials = true;
这个时候请求就能带上Cookie了，但是我们这个时候请求服务器，还是会返回一个错误
XMLHttpRequest cannot load http://api.domain.com//site/captcha?refresh. The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. Origin 'http://www.domain.com' is therefore not allowed access. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.
我们只要把改成这样就可以了
#需要启用 header_set模块
Header set Access-Control-Allow-Origin http://www.domain.com
Header set Access-Control-Allow-Credentials true
原理上来说。
- SESSION需要读取Cookie中的session_id获取用户的session
- cookie只能获取到domain的中的值，所有设置api.domain.com的 domain 为 .domain.com
- CORS为了安全只允许向一个指定域名发送请求带cookie，所有修改 通配符
*为 api.domain.com
这样子我们就完成了这个spa应用的跨域使用session的方法，其中cookie共享的方案用的是同域名的，不用域名的共享一般用的p3p技术，有兴趣的可以了解一下。
参考资料:
