Access-Control-Allow-Origin 跨域問題 SpringMVC解決 與 前端JS Webpack解決

 

 

 

跨域問題 是針對ajax的一種限制

跨域：瀏覽器對於JS的同源策略的限制。

以下情況都屬於跨域：

域名不同                       如: www.jd.com   www.taobao.com

域名相同,端口不同       如: www.taobao.com:8081  www.taobao.com:8082

二級域名不同               如: 3c.tmall.com   chaoshi.tmall.com 

http和https也屬於跨域

 

解決跨域問題的方案

目前比較常用的跨域解決方案有3種：

• Jsonp

  最早的解決方案，利用script標簽可以跨域的原理實現。  限制：需要服務的支持 ;  只能發起GET請求

• nginx反向代理

  思路是：利用nginx把跨域反向代理為不跨域，支持各種請求方式   缺點：需要在nginx進行額外配置，語義不清晰

• CORS

  規范化的跨域請求解決方案，安全可靠。

  優勢：在服務端進行控制是否允許跨域，可自定義規則 ;   支持各種請求方式

  缺點： 會產生額外的請求

 

*****因為我們將采用CORS的方式解決，故重點介紹一下它如何來處理!!!*****

   

    CORS是一個W3C標准，全稱是"跨域資源共享"（Cross-origin resource sharing）。

它允許瀏覽器向跨源服務器，發出XMLHttpRequest請求，從而克服了AJAX只能同源使用的限制。

CORS需要瀏覽器和服務器同時支持。目前，所有瀏覽器都支持該功能，IE瀏覽器不能低於IE10。

• 瀏覽器端：目前，所有瀏覽器都支持該功能（IE10以下不行）。整個CORS通信過程，都是瀏覽器自動完成，不需要用戶參與。

• 服務端：CORS通信與AJAX沒有任何差別，因此你不需要改變以前的業務邏輯。瀏覽器會在請求中攜帶一些頭信息，我們需要以此判斷是否允許其跨域，然后在響應頭中加入一些信息即可。這一般通過過濾器完成即可。

 

瀏覽器會將ajax請求分為兩類，其處理方案略有差異：簡單請求、特殊請求

簡單請求

只要同時滿足以下兩大條件，就屬於簡單請求。：

（1) 請求方法是以下三種方法之一：HEAD  GET  POST

（2）HTTP的頭信息不超出以下幾種字段： Accept  Accept-Language  Content-Language  Last-Event-ID  Content-Type：只限於三個值application/x-www-form-urlencoded、multipart/form-data、text/plain

當瀏覽器發現發起的ajax請求是簡單請求時，會在請求頭中攜帶一個字段：Origin

 

Origin中會指出當前請求屬於哪個域（協議+域名+端口）。服務會根據這個值決定是否允許其跨域。

如果服務器允許跨域，需要在返回的響應頭中攜帶下面信息：

Access-Control-Allow-Origin: http://yangw.com
Access-Control-Allow-Credentials: true
Content-Type: text/html; charset=utf-8

 

Access-Control-Allow-Origin：可接受的域，是一個具體域名或者*（代表任意域名）

Access-Control-Allow-Credentials：是否允許攜帶cookie，默認情況下，cors不會攜帶cookie，除非這個值是true

要想操作cookie，需要滿足3個條件：

      服務的響應頭中需要攜帶Access-Control-Allow-Credentials並且為true。

      瀏覽器發起ajax需要指定withCredentials 為true

      響應頭中的Access-Control-Allow-Origin一定不能為*，必須是指定的域名

 

特殊請求

不符合簡單請求的條件，會被瀏覽器判定為特殊請求,，例如請求方式為PUT。

特殊請求會在正式通信之前，增加一次HTTP查詢請求，稱為"預檢"請求（preflight）。

瀏覽器先詢問服務器，當前網頁所在的域名是否在服務器的許可名單之中，以及可以使用哪些HTTP動詞和頭信息字段。只有得到肯定答復，瀏覽器才會發出正式的XMLHttpRequest請求，否則就報錯。

與簡單請求相比，除了Origin以外，多了兩個頭：

 

Access-Control-Request-Method：  接下來會用到的請求方式，比如PUT

Access-Control-Request-Headers：  會額外用到的頭信息

Access-Control-Max-Age：本次許可的有效時長，單位是秒，過期之前的ajax請求就無需再次進行預檢了(讓它默認，不用處理)

 

我們只要解決了復雜清醒，簡單情形自然包含了!

解決方式1：后端JAVA

我們用Java框架SpringMVC實現: 由於我這里是一個Spring Cloud項目，故寫了個過濾器放在了網關里面統一處理

 

解決方式2--只在前端webpack-dev-server：

webpack配置中主要的參數說明

2.1 ‘/api’
捕獲API的標志，如果API中有這個字符串，那么就開始匹配代理，
比如API請求/api/users, 會被代理到請求 http://www.baidu.com/api/users 。

2.2 target
代理的API地址，就是需要跨域的API地址。
地址可以是域名,如：http://www.baidu.com
也可以是IP地址：http://127.0.0.1:3000
如果是域名需要額外添加一個參數changeOrigin: true，否則會代理失敗。

2.3 pathRewrite
路徑重寫，也就是說會修改最終請求的API路徑。
比如訪問的API路徑：/api/users,
設置pathRewrite: {’^/api’ : ‘’},后，
最終代理訪問的路徑：http://www.baidu.com/users，
這個參數的目的是給代理命名后，在訪問時把命名刪除掉。

2.4 changeOrigin
這個參數可以讓target參數是域名。

2.5 secure
secure: false,不檢查安全問題。
設置后，可以接受運行在 HTTPS 上，可以使用無效證書的后端服務器

2.6 其他參數配置查看http-proxy-middleware文檔
其他的配置參數等信息，可以查看這里：https://github.com/chimurai/h…

 

*********************以上兩種解決方式任選其一均可**************

 

 

 關於環境，我還在hosts中配置了域名映射,使用了nginx幫我反向代理

可以參考我上一篇博文  https://www.cnblogs.com/yangw/p/11947752.html