快捷導(dǎo)航

SpringBoot項(xiàng)目中如何解決跨域問題的最新方案?

更新時(shí)間：2025年03月22日 15:56:39 作者：清醒的人最荒唐

跨域問題是瀏覽器為了保護(hù)用戶的信息安全,實(shí)施了同源策略（Same-Origin Policy）,即只允許頁面請求同源（相同協(xié)議、域名和端口）的資源,當(dāng) JavaScript 發(fā)起的請求跨越了同源策略,即請求的目標(biāo)與當(dāng)前頁面的域名、端口、協(xié)議不一致時(shí),瀏覽器會阻止請求的發(fā)送或接收

跨域問題是瀏覽器為了保護(hù)用戶的信息安全，實(shí)施了同源策略（Same-Origin Policy），即只允許頁面請求同源（相同協(xié)議、域名和端口）的資源，當(dāng) JavaScript 發(fā)起的請求跨越了同源策略，即請求的目標(biāo)與當(dāng)前頁面的域名、端口、協(xié)議不一致時(shí)，瀏覽器會阻止請求的發(fā)送或接收。

一、同源策略

同源，就是咱們域名、端口號、ip、采用的協(xié)議都相同，那么我們就是同源的
反之就是不同源的?。?！
出于瀏覽器的同源策略限制。同源策略（Sameoriginpolicy）是一種約定，它是瀏覽器最核心也最基本的安全功能，如果缺少了同源策略，則瀏覽器的正常功能可能都會受到影響?？梢哉fWeb是構(gòu)建在同源策略基礎(chǔ)之上的，瀏覽器只是針對同源策略的一種實(shí)現(xiàn)。
所以，用最簡單的話來說，就是前端可以發(fā)請求給服務(wù)器，服務(wù)器也可以進(jìn)行響應(yīng)，只是因?yàn)闉g覽器會對請求頭進(jìn)行判斷，所以要么前端設(shè)置請求頭，要么后端設(shè)置請求頭

一個(gè)域名地址由以下幾個(gè)部分組成：
http://www.aaa.com:8080/sie=UTF-8&wd=SpringBoot

    協(xié)議：http
    域名：子域名www，主域名aaa.com
    端口：8080

從一個(gè)域名的網(wǎng)頁去請求另一個(gè)域名的資源時(shí)，協(xié)議，域名，端口任意不同，都會出現(xiàn)跨域問題。
http://www.aaa.com:8080——>http://www.aaa.com:8080：同域訪問
http://www.aaa.com:8080——>http://www.bbb.com:8080：跨域訪問

二、跨域問題

跨域報(bào)錯(cuò)如下:

Access to XMLHttpRequest at 'http://localhost:8080/t1' from origin 'http://localhost:63342' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
test1.html?_ijt=aekdfma33ut4n31cgsohdrjt89:17 {readyState: 0, getResponseHeader: ƒ, getAllResponseHeaders: ƒ, setRequestHeader: ƒ, overrideMimeType: ƒ, …}
jquery-1.9.1.min.js:5 GET http://localhost:8080/t1 net::ERR_FAILED 200

三、spring boot解決跨域問題

對于 CORS的跨域請求，主要有以下幾種方式可供選擇：

返回新的CorsFilter
重寫 WebMvcConfigurer
使用注解 @CrossOrigin
手動(dòng)設(shè)置響應(yīng)頭 (HttpServletResponse)
自定web filter 實(shí)現(xiàn)跨域

注意:

CorFilter / WebMvConfigurer / @CrossOrigin 需要 SpringMVC 4.2以上版本才支持，對應(yīng)springBoot 1.3版本以上
上面前兩種方式屬于全局 CORS 配置，后兩種屬于局部 CORS配置。如果使用了局部跨域是會覆蓋全局跨域的規(guī)則，所以可以通過 @CrossOrigin 注解來進(jìn)行細(xì)粒度更高的跨域資源控制。
其實(shí)無論哪種方案，最終目的都是修改響應(yīng)頭，向響應(yīng)頭中添加瀏覽器所要求的數(shù)據(jù)，進(jìn)而實(shí)現(xiàn)跨域

1、使用CorsFilter

@Configuration
public class corsFilter {
    @Bean
    public CorsFilter CorsFilter() {
        CorsConfiguration corsConfiguration = new CorsConfiguration();

        corsConfiguration.addAllowedOriginPattern("*");
        corsConfiguration.addAllowedHeader("*");
        corsConfiguration.addAllowedMethod("*");
        corsConfiguration.setAllowCredentials(true);


        UrlBasedCorsConfigurationSource urlBasedCorsConfigurationSource = new UrlBasedCorsConfigurationSource();
        urlBasedCorsConfigurationSource.registerCorsConfiguration("/**",corsConfiguration);

        return new CorsFilter(urlBasedCorsConfigurationSource);
    }
}

2、實(shí)現(xiàn)WebMvcConfigurer里面的addCorsMappings方法

@Configuration
public class corsFilter1 implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")  // 匹配所有的路徑
                .allowCredentials(true) // 設(shè)置允許憑證
                .allowedHeaders("*")   // 設(shè)置請求頭
                .allowedMethods("GET","POST","PUT","DELETE") // 設(shè)置允許的方式
                .allowedOriginPatterns("*");
    }
}

3、@CrossOrigin局部跨域通過

@GetMapping("/t2")
@CrossOrigin
public Map t2() {
    HashMap<String, Object> map = new HashMap<>();
    User user = new User();
    user.setUsername("123456");
    user.setPassword("程世玉");
    map.put("user",user);

    return map;
}

4、添加響應(yīng)頭解決跨域

@RequestMapping(value = "/user-1")
public User getUser_1(HttpServletResponse response ) {

    // 允許所有，不安全
    response.addHeader("Access-Control-Allow-Origin", "*");
    response.addHeader("Access-Control-Max-Age", "10");
    response.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    response.setHeader("Access-Control-Allow-Methods", "GET, POST, PUT");
    response.setHeader("Access-Control-Allow-Credentials", "true");

    
    return new User(1L, "Booker", "admin", "sdfsdkjf93hu8dvn");
}

5、使用自定義filter實(shí)現(xiàn)跨域

public class MyCorsFilter implements Filter {
  public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
    HttpServletResponse response = (HttpServletResponse) res;
    response.setHeader("Access-Control-Allow-Origin", "*");
    response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
    response.setHeader("Access-Control-Max-Age", "3600");
    response.setHeader("Access-Control-Allow-Headers", "x-requested-with,content-type");
    chain.doFilter(req, res);
  }
  public void init(FilterConfig filterConfig) {}
  public void destroy() {}
}

@Configuration
public class FilterConfig {
    @Bean
    public FilterRegistrationBean filterRegistrationBean(){
        FilterRegistrationBean bean = new FilterRegistrationBean();
        bean.setFilter(new MyCorsFilter());
        bean.addUrlPatterns("/*");
        return bean;
    }
}