跨域問題是瀏覽器為了保護用戶的信息安全,實施了同源策略(Same-Origin Policy),即只允許頁面請求同源(相同協議、域名和端口)的資源,當 JavaScript 發起的請求跨越了同源策略,即請求的目標與當前頁面的域名、端口、協議不一致時,瀏覽器會阻止請求的發送或接收。
跨域問題可以從以下方面解決:
而這 3 類解決方案,總共包含了 8 種解決方案,一起來看。
在 Spring Boot 中跨域問題有以下 5 種解決方案:
接下來詳細來看。
使用 @CrossOrigin 注解可以輕松的實現跨域,此注解既可以修飾類,也可以修飾方法。當修飾類時,表示此類中的所有接口都可以跨域;當修飾方法時,表示此方法可以跨域,它的實現如下:
import org.springframework.web.bind.annotation.CrossOrigin;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RestController;import java.util.HashMap;@RestController@CrossOrigin(origins = "*")public class TestController { @RequestMapping("/test") public HashMap<String, Object> test() { return new HashMap<String, Object>() {{ put("state", 200); put("data", "success"); put("msg", ""); }}; }}
以上代碼的執行結果如下圖所示:
從上圖中可以看出,前端項目訪問另一個后端項目成功了,也就說明它解決了跨域問題。
此方式雖然雖然實現(跨域)比較簡單,但細心的朋友也能發現,使用此方式只能實現局部跨域,當一個項目中存在多個類的話,使用此方式就會比較麻煩(需要給所有類上都添加此注解)。
通過設置配置文件的方式就可以實現全局跨域了,它的實現步驟如下:
具體實現代碼如下:
import org.springframework.context.annotation.Configuration;import org.springframework.web.servlet.config.annotation.CorsRegistry;import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;@Configuration // 一定不要忽略此注解public class CorsConfig implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") // 所有接口 .allowCredentials(true) // 是否發送 Cookie .allowedOriginPatterns("*") // 支持域 .allowedMethods(new String[]{"GET", "POST", "PUT", "DELETE"}) // 支持方法 .allowedHeaders("*") .exposedHeaders("*"); }}
此實現方式和上一種實現方式類似,它也可以實現全局跨域,它的具體實現代碼如下:
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;@Configuration // 一定不能忽略此注解public class MyCorsFilter { @Bean public CorsFilter corsFilter() { // 1.創建 CORS 配置對象 CorsConfiguration config = new CorsConfiguration(); // 支持域 config.addAllowedOriginPattern("*"); // 是否發送 Cookie config.setAllowCredentials(true); // 支持請求方式 config.addAllowedMethod("*"); // 允許的原始請求頭部信息 config.addAllowedHeader("*"); // 暴露的頭部信息 config.addExposedHeader("*"); // 2.添加地址映射 UrlBasedCorsConfigurationSource corsConfigurationSource = new UrlBasedCorsConfigurationSource(); corsConfigurationSource.registerCorsConfiguration("/**", config); // 3.返回 CorsFilter 對象 return new CorsFilter(corsConfigurationSource); }}
此方式是解決跨域問題最原始的方式,但它可以支持任意的 Spring Boot 版本(早期的 Spring Boot 版本也是支持的)。但此方式也是局部跨域,它應用的范圍最小,設置的是方法級別的跨域,它的具體實現代碼如下:
import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RestController;import javax.servlet.http.HttpServletResponse;import java.util.HashMap;@RestControllerpublic class TestController { @RequestMapping("/test") public HashMap<String, Object> test(HttpServletResponse response) { // 設置跨域 response.setHeader("Access-Control-Allow-Origin", "*"); return new HashMap<String, Object>() {{ put("state", 200); put("data", "success"); put("msg", ""); }}; }}
通過重寫 ResponseBodyAdvice 接口中的 beforeBodyWrite(返回之前重寫)方法,我們可以對所有的接口進行跨域設置,它的具體實現代碼如下:
import org.springframework.core.MethodParameter;import org.springframework.http.MediaType;import org.springframework.http.server.ServerHttpRequest;import org.springframework.http.server.ServerHttpResponse;import org.springframework.web.bind.annotation.ControllerAdvice;import org.springframework.web.servlet.mvc.method.annotation.ResponseBodyAdvice;@ControllerAdvicepublic class ResponseAdvice implements ResponseBodyAdvice { /** * 內容是否需要重寫(通過此方法可以選擇性部分控制器和方法進行重寫) * 返回 true 表示重寫 */ @Override public boolean supports(MethodParameter returnType, Class converterType) { return true; } /** * 方法返回之前調用此方法 */ @Override public Object beforeBodyWrite(Object body, MethodParameter returnType, MediaType selectedContentType, Class selectedConverterType, ServerHttpRequest request, ServerHttpResponse response) { // 設置跨域 response.getHeaders().set("Access-Control-Allow-Origin", "*"); return body; }}
此實現方式也是全局跨域,它對整個項目中的所有接口有效。
在 Nginx 服務器的配置文件中添加以下代碼:
server { listen 80; server_name your_domain.com; location /api { # 允許跨域請求的域名,* 表示允許所有域名訪問 add_header 'Access-Control-Allow-Origin' '*'; # 允許跨域請求的方法 add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS'; # 允許跨域請求的自定義 Header add_header 'Access-Control-Allow-Headers' 'Origin, X-Requested-With, Content-Type, Accept'; # 允許跨域請求的 Credential add_header 'Access-Control-Allow-Credentials' 'true'; # 預檢請求的存活時間,即 Options 請求的響應緩存時間 add_header 'Access-Control-Max-Age' 3600; # 處理預檢請求 if ($request_method = 'OPTIONS') { return 204; } } # 其他配置...}
上述示例中,location /api 代表配置針對 /api 路徑的請求進行跨域設置。可以根據具體需要修改 location 的值和其他相關參數。配置中的 add_header 指令用于設置響應頭部,常用的響應頭部包括以下這些:
Spring Cloud Gateway 中解決跨域問題可以通過以下兩種方式實現:
在 application.yml 或 application.properties 中添加以下配置:
spring: cloud: gateway: globalcors: corsConfigurations: '[/**]': # 這里的'/**'表示對所有路由生效,可以根據需要調整為特定路徑 allowedOrigins: "*" # 允許所有的源地址,也可以指定具體的域名 allowedMethods: # 允許的 HTTP 方法類型 - GET - POST - PUT - DELETE - OPTIONS allowedHeaders: "*" # 允許所有的請求頭,也可以指定具體的請求頭 allowCredentials: true # 是否允許攜帶憑證(cookies) maxAge: 3600 # CORS預檢請求的有效期(秒)
其中:
通過這樣的配置,Spring Cloud Gateway 網關將自動處理所有經過它的跨域請求,并添加相應的響應頭,從而允許前端應用執行跨域請求。
在 Spring-Framework 從 5.3 版本之前,使用以下代碼可以讓 Spring Cloud Gateway 網關允許跨域:
@Configurationpublic class GlobalCorsConfig { @Bean public CorsWebFilter corsWebFilter() { CorsConfiguration config = new CorsConfiguration(); // 這里僅為了說明問題,配置為放行所有域名,生產環境請對此進行修改 config.addAllowedOrigin("*"); // 放行的請求頭 config.addAllowedHeader("*"); // 放行的請求類型,有 GET, POST, PUT, DELETE, OPTIONS config.addAllowedMethod("*"); // 暴露頭部信息 config.addExposedHeader("*"); // 是否允許發送 Cookie config.setAllowCredentials(true); UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource(); source.registerCorsConfiguration("/**", config); return new CorsWebFilter(source); }}
而 Spring-Framework 5.3 版本之后,關于 CORS 跨域配置類 CorsConfiguration 中將 addAllowedOrigin 方法名修改為 addAllowedOriginPattern,因此配置了變成了以下這樣:
@Configurationpublic class GlobalCorsConfig { @Bean public CorsWebFilter corsWebFilter() { CorsConfiguration config = new CorsConfiguration(); // 這里僅為了說明問題,配置為放行所有域名,生產環境請對此進行修改 config.addAllowedOriginPattern("*"); // 放行的請求頭 config.addAllowedHeader("*"); // 放行的請求類型,有 GET, POST, PUT, DELETE, OPTIONS config.addAllowedMethod("*"); // 暴露頭部信息 config.addExposedHeader("*"); // 是否允許發送 Cookie config.setAllowCredentials(true); UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource(); source.registerCorsConfiguration("/**", config); return new CorsWebFilter(source); }}
跨域問題可以在網關層、反向代理層或應用層來解決,而它們的使用優先級是:網關層 > 代理層 > 應用層。因為越靠前覆蓋范圍就越大,解決跨域問題就越容易。
本文鏈接:http://www.www897cc.com/showinfo-26-68342-0.html解決跨域問題的八種方法,含網關、Nginx 和 SpringBoot
聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。郵件:2376512515@qq.com
上一篇: C++ rand()隨機數函數的應用