跨域资源共享Cors

Cors介绍 : http://www.ruanyifeng.com/blog/2016/04/cors.html

问题 : 前后端分离会话如何保持?

  • 无非就是登录后,server返还一个token,服务器端token存放在redis中获取其他中间件中,然后前端存到cookie中,或者每次请求携带token,获取放在请求头中.
  • 还可以更加简便些用Cors,登录后,登录信息存放到session,服务器端session用spring-session管理,或者直接用tomcat的session;然后前端每次ajax请求设置withCredentials属性,设置为 true ,具体如下

Spring 对Cors的支持 : https://spring.io/blog/2015/06/08/cors-support-in-spring-framework

后端

Spring MVC
这里使用的是Spring,Spring 需要4.2以上版本

1
2
3
4
5
6
7
8
<mvc:cors>
	<mvc:mapping
        path="/**"
		allowed-origins="http://127.0.0.1"
		allowed-methods="GET,PUT,DELETE,POST"
		allow-credentials="true" exposed-headers="Set-Cookie"
    />
</mvc:cors>

如果是基于Java注解配置

1
2
3
4
5
6
7
 public void addCorsMappings(CorsRegistry registry) {
    registry.addMapping("/**")
            .allowedOrigins( "*" )
            .allowedMethods("GET,PUT,DELETE,POST")
            .exposedHeaders("Set-Cookie")
            .allowCredentials(true);
}

Spring MVC + Spring Security
Spring Security的配置还不一样,Spring Security因为需要配置DelegatingFilterProxy过滤器则会先进入过滤器

Spring Security : http://www.jianshu.com/p/27060722843b

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<bean id="corsSource" class="org.springframework.web.cors.UrlBasedCorsConfigurationSource">
        <!--<property name="pathMatcher" ref="pathMatcher" />-->
        <property name="corsConfigurations">
            <map>
                <description>设置cors</description>
                <entry key="/**" value-ref="configuration"/>
            </map>
        </property>
    </bean>
    <bean id="configuration" class="org.springframework.web.cors.CorsConfiguration">
        <property name="allowedOrigins">
            <list>
                <value>http://127.0.0.1</value>
            </list>
        </property>
        <property name="allowedMethods">
            <list>
                <value>GET</value>
                <value>POST</value>
                <value>PUT</value>
                <value>DELETE</value>
            </list>
        </property>
        <property name="allowedHeaders">
            <list>
                <value>*</value>
            </list>
        </property>
        <property name="exposedHeaders">
            <list>
                <value>Set-Cookie</value>
            </list>
        </property>
        <property name="allowCredentials">
            <value>true</value>
        </property>
</bean>
1
2
3
4
5

allowed-origins   : 接受哪个域名的请求,* 表示接受任意域名的请求   
allowed-methods   : 接受哪些方法
allow-credentials : 表示是否允许发送Cookie,默认情况下，Cookie不包括在CORS请求之中。设为true，即表示服务器明确许可，Cookie可以包含在请求中，一起发给服务器。
exposed-headers   : 响应头中允许访问的header，默认为空,这里设置了 'Set-Cookie' ,这里与配合前端,即可实现保持会话

前端

AJAX请求中设置withCredentials属性,设置为 true

1
2
var xhr = new XMLHttpRequest();
xhr.withCredentials = true;

angular vue 这类框架,都有拦截器,在拦截器中统一处理就行了.
这样前端每次请求,后端都知道是谁了,其实也就是利用cookie,前后协作完成