WEB前端開發中瀏覽器判斷是跨域請求會在請求頭上添加origin，表示這個請求來源哪里。比如：

PlaintextGET?/?HTTP/1.1Origin:?http://localhost:8601

服務器收到請求判斷這個Origin是否允許跨域，如果允許則在響應頭中說明允許該來源的跨域請求，如下：

PlaintextAccess-Control-Allow-Origin：http://localhost:8601

如果允許任何域名來源的跨域請求，則響應如下：

PlaintextAccess-Control-Allow-Origin：*

解決跨域的方法：

1、JSONP

通過script標簽的src屬性進行跨域請求，如果服務端要響應內容則首先讀取請求參數callback的值，callback是一個回調函數的名稱，服務端讀取callback的值后將響應內容通過調用callback函數的方式告訴請求方。如下圖：

2、添加響應頭

服務端在響應頭添加 Access-Control-Allow-Origin：

3、通過nginx代理跨域

由于服務端之間沒有跨域，瀏覽器通過nginx去訪問跨域地址。

1)瀏覽器先訪問http://192.168.101.10:8601 nginx提供的地址，進入頁面

2)此頁面要跨域訪問http://192.168.101.11:8601 ，不能直接跨域訪問http://www.baidu.com:8601 ，而是訪問nginx的一個同源地址，比如：http://192.168.101.11:8601/api ，通過http://192.168.101.11:8601/api 的代理去訪問http://www.baidu.com:8601。

這樣就實現了跨域訪問。

瀏覽器到http://192.168.101.11:8601/api 沒有跨域

nginx到http://www.baidu.com:8601通過服務端通信，沒有跨域。

我們準備使用方案2解決跨域問題。在內容管理的api工程config包下編寫GlobalCorsConfig.java，

或直接從課程資料/項目工程下拷貝，

代碼如下：

Javapackage?com.xuecheng.system.config;import?org.springframework.context.annotation.Bean;import?org.springframework.context.annotation.Configuration;import?org.springframework.web.cors.CorsConfiguration;import?org.springframework.web.cors.UrlBasedCorsConfigurationSource;import?org.springframework.web.filter.CorsFilter;/**?*?@description?跨域過慮器?*?@author?Mr.M?*?@date?2022/9/7?11:04?*?@version?1.0?*/?@Configuration?public?class?GlobalCorsConfig?{??/**???*?允許跨域調用的過濾器???*/??@Bean??public?CorsFilter?corsFilter()?{???CorsConfiguration?config?=?new?CorsConfiguration();???//允許白名單域名進行跨域調用???config.addAllowedOrigin("*");???//允許跨越發送cookie???config.setAllowCredentials(true);???//放行全部原始頭信息???config.addAllowedHeader("*");???//允許所有請求方法跨域調用???config.addAllowedMethod("*");???UrlBasedCorsConfigurationSource?source?=?new?UrlBasedCorsConfigurationSource();???source.registerCorsConfiguration("/**",?config);???return?new?CorsFilter(source);??}?}

此配置類實現了跨域過慮器，在響應頭添加Access-Control-Allow-Origin。

重啟系統管理服務，前端工程可以正常進入http://localhost:8601，觀察瀏覽器記錄，成功解決跨域。

如果你對前端開發感興趣請點擊進入云和數據官網，我們有專業的客服老師為您答疑解惑。

云和數據ICT職業教育發揮公司產業化優勢與技術積淀，整合國內外優秀師資，累計自主研發230余項教輔、教材，300余項實踐教學案例與實訓平臺，采用六位一體項目制教學模式，年培養高端ICT技術人才超10000人，累計為企業輸送高端泛ICT技術人才超9萬人，學員60%來自于口碑推薦。云和數據人才培養技術方向涵蓋大數據、JAVA軟件工程、UI用戶體驗設計、前端開發、軟件測試、智能制造、虛擬現實、云計算、人工智能九大方向，以九大精品課程為基礎，八大就業基地為依托，一次就業率99.02%，61.9%就業薪資超1W，以大數據為首的精品專業平均薪資13.25K。