SpringBoot添加支持CORS跨域訪問

原文：https://www.jianshu.com/p/c6ea21b64f6e

 

 

CORS（Cross-Origin Resource Sharing）"跨域資源共享"，是一個W3C標准，它允許瀏覽器向跨域服務器發送Ajax請求，打破了Ajax只能訪問本站內的資源限制，CORS在很多地方都有被使用，微信支付的JS支付就是通過JS向微信服務器發送跨域請求。開放Ajax訪問可被跨域訪問的服務器大大減少了后台開發的工作，前后台工作也可以得到很好的明確以及分工，下面我們就看講一下如何讓你的SpringBoot項目支持CORS跨域。

本章目標

基於SpringBooot項目搭建可以站外Ajax請求訪問的跨域資源服務器。

構建項目

使用IDEA開發工具創建一個SpringBoot項目，預先添加Web依賴即可，項目結構如下圖1所示：

 

圖1

CORSConfiguration

我們只需要添加項目Web依賴就可以了，下面我們開始添加CORS的配置信息，我們創建一個CORSConfiguration配置類，如下圖2所示：

 

圖2

上圖2內我們的CORSConfiguration配置類繼承了WebMvcConfiugrationAdaper父類並且重寫了addCorsMappings方法，我們來簡單介紹下我們的配置信息

addMapping：配置可以被跨域的路徑，可以任意配置，可以具體到直接請求路徑。
allowedMethods：允許所有的請求方法訪問該跨域資源服務器，如：POST、GET、PUT、DELETE等。
allowedOrigins：允許所有的請求域名訪問我們的跨域資源，可以固定單條或者多條內容，如："http://www.baidu.com"，只有百度可以訪問我們的跨域資源。
allowedHeaders：允許所有的請求header訪問，可以自定義設置任意請求頭信息，如："X-YAUTH-TOKEN"

編寫跨域資源請求

我們的跨域配置到目前來說已經配置完成了，SpringBoot已經為我們內置相關配置，我們只需要重寫方法修改部分參數即可，下面我們來創建一個測試跨域資源的控制器，如下圖3所示：

 

圖3

在圖3內的IndexController控制器內，我們僅僅添加了一個測試返回文本的內容，當然這個控制器可以處理任意業務邏輯。

測試跨域請求

我們在項目外創建一個index.html頁面（上傳碼雲后會在resources目錄找到），頁面內添加部分jquery代碼，如下圖4所示：

 

圖4

我們引用了在線的jquery代碼，並且在頁面加載的時候為id=cors的輸入按鈕綁定點擊事件，點擊按鈕時就會請求我們的/cors跨域資源路徑，下面我們來運行項目測試下跨域請求，項目運行日志如下圖5所示：

 

圖5

可以看到上圖5內項目啟動時SpringBoot內置的SpringMVC已經把我們的/cors添加到映射集合，我們打開之前編寫的index.html網頁，界面效果如下圖6所示：

 

圖6

接下來我們點擊“CORS跨域測試”按鈕，查看下效果，如下圖7所示：

 

圖7

上圖7內可以看到，界面給我返回了我們/cors路徑返回的文本內容，證明我們的ajax請求完美的通過跨域資源庫訪問了開放跨域的資源路徑。

下面我們來把我們的跨域配置注釋掉，重啟項目后刷新index.html再次點擊“CORS跨域測試”按鈕，界面輸出效果如下圖8所示：

 

圖8

可以看到我們點擊后並沒有獲取到返回內容，而是給我們提示了異常，告訴我們無法加載資源。

本章總結

本章簡單講解了SpringBoot項目對CORS請求的處理，完全自定義處理請求路徑，可對請求頭信息以及請求的域名進行控制。

作者：恆宇少年
鏈接：https://www.jianshu.com/p/c6ea21b64f6e
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。