前後端分離 跨域問題解決

跨域的實現原理

http 跨域請求後端服務的時候會在請求頭中帶上如下資訊

Origin: http://api.jijs.com

後端伺服器需要在http的響應頭中新增以下響應頭

Access-Control-Allow-Origin : http://api.jijs.com

接收到請求後，並驗證該站點是否支援跨域請求。
如果前端沒有收到該相應頭，則瀏覽器不允許跨域請求的。

跨域解決方案

跨域問題可以通過nginx或其它的反向代理軟體配置實現。
也可以使用node.js 通過後臺轉發請求來解決跨域問題。（後端請求是不存在跨域問題的）

開發專案解析跨域可以通過如下兩中方式解決。

1.程式碼中設定

    this.response.addHeader("Access-Control-Allow-Origin", "*");
    this.response.addHeader("Access-Control-Allow-Methods", "get, post, put, delete, options");
    this.response.addHeader("Access-Control-Allow-Headers", "origin, content-type, accept");
    this.response.addHeader("Access-Control-Allow-Credentials", "true");

配置Access-Control-Allow相關的響應的頭

2. 使用第三方包過濾器中設定

依賴的maven

<dependency>
    <groupId>com.thetransactioncompany</groupId>
    <artifactId>cors-filter</artifactId>
    <version>2.6</version>
</dependency>

專案中web.xml中的配置如下：

<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>  

支援cookies

響應頭中需要新增下面資訊

Access-Control-Allow-Credentials:true

Access-Control-Allow-Credentials
該欄位可選。它的值是一個布林值，表示是否允許傳送Cookie。預設情況下，Cookie不包括在CORS請求之中。設為true，即表示伺服器明確許可，Cookie可以包含在請求中，一起發給伺服器。這個值也只能設為true，如果伺服器不要瀏覽器傳送Cookie，刪除該欄位即可。

Access-Control-Allow-Origin:http://api.jijs.com

需要注意的是，如果要傳送Cookie，Access-Control-Allow-Origin就不能設為星號，必須指定明確的、與請求網頁一致的域名。同時，Cookie依然遵循同源政策，只有用伺服器域名設定的Cookie才會上傳，其他域名的Cookie並不會上傳，且（跨源）原網頁程式碼中的document.cookie也無法讀取伺服器域名下的Cookie。

---

想了解更多精彩內容請關注我的公眾號