跨域請求遇到的問題記錄

由於瀏覽器同源策略的存在,在進行前後端分離開發中遇到了一些問題.

(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){}
    });