跨域的實現原理

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。

---

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

總結

以上是生活随笔為你收集整理的前后端分离 跨域问题解决的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。