跨域的實現(xiàn)原理

http 跨域請求后端服務(wù)的時候會在請求頭中帶上如下信息

Origin: http://api.jijs.com

后端服務(wù)器需要在http的響應(yīng)頭中添加以下響應(yīng)頭

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

接收到請求后，并驗證該站點是否支持跨域請求。
如果前端沒有收到該相應(yīng)頭，則瀏覽器不允許跨域請求的。

跨域解決方案

跨域問題可以通過nginx或其它的反向代理軟件配置實現(xiàn)。
也可以使用node.js 通過后臺轉(zhuǎn)發(fā)請求來解決跨域問題。（后端請求是不存在跨域問題的）

開發(fā)項目解析跨域可以通過如下兩中方式解決。

1.代碼中設(shè)置

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相關(guān)的響應(yīng)的頭

2. 使用第三方包過濾器中設(shè)置

依賴的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

響應(yīng)頭中需要添加下面信息

Access-Control-Allow-Credentials:true

Access-Control-Allow-Credentials
該字段可選。它的值是一個布爾值，表示是否允許發(fā)送Cookie。默認情況下，Cookie不包括在CORS請求之中。設(shè)為true，即表示服務(wù)器明確許可，Cookie可以包含在請求中，一起發(fā)給服務(wù)器。這個值也只能設(shè)為true，如果服務(wù)器不要瀏覽器發(fā)送Cookie，刪除該字段即可。

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

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

---

想了解更多精彩內(nèi)容請關(guān)注我的公眾號

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。