由于浏览器同源策略的存在,在进行前后端分离开发中遇到了一些问题.

(1)前后端无法通信

maven引入依赖:

 <!-- Tomcat服务器下解决跨域问题的工具包 -->
    <dependency>
      <groupId>com.thetransactioncompany</groupId>
      <artifactId>cors-filter</artifactId>
      <version>2.5</version>
    </dependency>

后台通过过滤器对请求头设置一些字段:

   <!--解决跨域问题 -->
    <filter>
        <filter-name>CORS</filter-name>
        <filter-class>com.thetransactioncompany.cors.CORSFilter</filter-class>
        <init-param>
            <param-name>cors.allowOrigin</param-name>
            <param-value>*</param-value>
        </init-param>
        <init-param>
            <param-name>cors.supportedMethods</param-name>
            <param-value>GET, POST, HEAD, PUT, DELETE</param-value>
        </init-param>
        <init-param>
            <param-name>cors.supportedHeaders</param-name>
            <param-value>Accept, Origin, X-Requested-With, Content-Type, Last-Modified</param-value>
        </init-param>
        <init-param>
            <param-name>cors.exposedHeaders</param-name>
            <param-value>Set-Cookie</param-value>
        </init-param>
        <init-param>
            <param-name>cors.supportsCredentials</param-name>
            <param-value>true</param-value>
        </init-param>
    </filter>
    <filter-mapping>
    <filter-name>CORS</filter-name>
    <url-pattern>/*</url-pattern>
    </filter-mapping>

此外还可以通过Nginx进行请求转发来解决.

(2)Ajax默认不携带Cookie

修改ajax参数，使之支持跨域携带cookie：

xhrFields : {withCredentials: true},
crossDomain : true,

如下:

$.ajax({
    type        :  'get',
    url         :  '',
    dataType    :  'json',
    data        :  '',
    xhrFields   : {withCredentials: true},
    crossDomain : true,
    success     : function(res){},
    error       : function(err){}
    });