前後端分離 跨域問題解決
阿新 • • 發佈:2019-02-12
跨域的實現原理
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。
想了解更多精彩內容請關注我的公眾號