1. 若依框架跨域問題全景解析作為國內(nèi)主流的企業(yè)級(jí)快速開發(fā)框架若依Ruoyi在實(shí)際部署中經(jīng)常面臨跨域訪問的挑戰(zhàn)。最近在技術(shù)社區(qū)看到不少開發(fā)者反饋前后端分離模式下明明按照文檔配置了CORS為什么還是出現(xiàn)Access-Control-Allow-Origin報(bào)錯(cuò) 這個(gè)問題看似簡單實(shí)則涉及網(wǎng)絡(luò)協(xié)議、框架配置、部署環(huán)境等多重因素。本文將結(jié)合若依4.7.5版本從HTTP協(xié)議層到代碼實(shí)現(xiàn)層徹底講透跨域問題的解決方案。關(guān)鍵提示跨域問題本質(zhì)是瀏覽器的安全限制與服務(wù)端通信能力無關(guān)。即使看到401/403狀態(tài)碼也要先解決CORS問題才能進(jìn)行后續(xù)調(diào)試。2. 跨域原理深度剖析2.1 瀏覽器同源策略機(jī)制同源策略Same-Origin Policy要求協(xié)議、域名、端口三者完全一致。在若依前后端分離架構(gòu)中常見以下典型場景會(huì)觸發(fā)跨域開發(fā)環(huán)境前端8080端口訪問后端9200端口生產(chǎn)環(huán)境主站域名訪問api子域名測試環(huán)境IP直連訪問域名服務(wù)2.2 預(yù)檢請(qǐng)求Preflight機(jī)制對(duì)于非簡單請(qǐng)求如Content-Type為application/json瀏覽器會(huì)先發(fā)送OPTIONS請(qǐng)求進(jìn)行預(yù)檢。若依框架中以下操作會(huì)觸發(fā)預(yù)檢使用RequestBody接收J(rèn)SON參數(shù)自定義請(qǐng)求頭如攜帶tokenPUT/DELETE等非標(biāo)準(zhǔn)方法// 典型觸發(fā)預(yù)檢的若依控制器代碼 PostMapping(/update) public AjaxResult update(RequestBody SysUser user) { return success(userService.updateUser(user)); }2.3 CORS響應(yīng)頭核心參數(shù)響應(yīng)頭作用若依配置示例值A(chǔ)ccess-Control-Allow-Origin允許的源域名* 或 https://ruoyi.vipAccess-Control-Allow-Methods允許的HTTP方法GET,POST,PUT,DELETEAccess-Control-Allow-Headers允許的請(qǐng)求頭Authorization,Content-TypeAccess-Control-Max-Age預(yù)檢結(jié)果緩存時(shí)間秒36003. 若依框架跨域配置實(shí)戰(zhàn)3.1 基礎(chǔ)版Spring Boot配置類在ruoyi-admin模塊的config包下新增CorsConfigConfiguration public class CorsConfig implements WebMvcConfigurer { Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping(/**) .allowedOrigins(*) .allowedMethods(GET, POST, PUT, DELETE) .allowedHeaders(*) .allowCredentials(true) .maxAge(3600); } }常見坑點(diǎn)allowCredentials(true)時(shí)不能使用allowedOrigins(*)必須指定具體域名3.2 進(jìn)階版Nginx層統(tǒng)一處理在生產(chǎn)環(huán)境推薦使用Nginx統(tǒng)一處理跨域避免每個(gè)應(yīng)用重復(fù)配置server { listen 80; server_name api.ruoyi.vip; location / { add_header Access-Control-Allow-Origin $http_origin; add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE,OPTIONS; add_header Access-Control-Allow-Headers Content-Type,Authorization; add_header Access-Control-Allow-Credentials true; if ($request_method OPTIONS) { return 204; } proxy_pass http://127.0.0.1:9200; } }3.3 特殊場景Sa-Token整合方案當(dāng)集成Sa-Token時(shí)需要額外處理token相關(guān)頭部// 在SaTokenConfig中補(bǔ)充配置 Configuration public class SaTokenConfig implements WebMvcConfigurer { Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping(/**) .allowedOrigins(https://admin.ruoyi.vip) .allowedMethods(*) .allowedHeaders(satoken, Content-Type) .exposedHeaders(satoken) .allowCredentials(true); } }4. 疑難問題排查指南4.1 常見報(bào)錯(cuò)與解決方案錯(cuò)誤現(xiàn)象根本原因解決方案403 Forbidden (CORS preflight channel error)預(yù)檢請(qǐng)求未通過確保OPTIONS請(qǐng)求返回200/204Missing CORS header Access-Control-Allow-Origin響應(yīng)頭未正確配置檢查Nginx或Spring配置是否有誤Credential is not supported if the CORS header Access-Control-Allow-Origin is *憑證模式與通配符沖突改用具體域名并開啟allowCredentials4.2 瀏覽器調(diào)試技巧Chrome開發(fā)者工具中Network標(biāo)簽勾選Disable cache過濾選項(xiàng)輸入OPTIONS查找預(yù)檢請(qǐng)求查看Response Headers是否包含CORS相關(guān)頭使用curl模擬預(yù)檢請(qǐng)求curl -X OPTIONS http://api.ruoyi.vip/user/list \ -H Origin: http://localhost:8080 \ -H Access-Control-Request-Method: POST \ -H Access-Control-Request-Headers: content-type \ -I4.3 若依特定問題排查場景1代碼生成器接口跨域在ruoyi-generator模塊單獨(dú)添加配置Bean public FilterRegistrationBeanCorsFilter generatorCorsFilter() { UrlBasedCorsConfigurationSource source new UrlBasedCorsConfigurationSource(); CorsConfiguration config new CorsConfiguration(); config.addAllowedOriginPattern(*); config.addAllowedHeader(*); config.addAllowedMethod(*); source.registerCorsConfiguration(/tool/gen/**, config); return new FilterRegistrationBean(new CorsFilter(source)); }場景2Swagger文檔跨域在application.yml中增加spring: mvc: pathmatch: matching-strategy: ant_path_matcher5. 安全加固建議生產(chǎn)環(huán)境務(wù)必指定具體域名而非通配符.allowedOrigins(https://admin.ruoyi.vip, https://mobile.ruoyi.vip)敏感接口建議結(jié)合CORS與權(quán)限校驗(yàn)PreAuthorize(ss.hasPermi(system:user:edit)) PostMapping(/update) public AjaxResult update(RequestBody SysUser user) { // 業(yè)務(wù)邏輯 }定期檢查CORS配置是否被惡意修改-- 監(jiān)控系統(tǒng)參數(shù)表變更 SELECT * FROM sys_config WHERE config_key LIKE %cors% AND update_time DATE_SUB(NOW(), INTERVAL 1 DAY);實(shí)際項(xiàng)目中我們?cè)龅絅ginx配置被意外覆蓋導(dǎo)致跨域失效的情況。后來通過在若依系統(tǒng)監(jiān)控中增加配置變更提醒徹底解決了這類問題。建議大家在解決基礎(chǔ)跨域問題后進(jìn)一步考慮這種防御性編程措施。