Springboot跨域處理的多種方式小結(jié)

更新時(shí)間：2023年11月21日 15:33:11 作者：編程界小明哥

當(dāng)一臺(tái)服務(wù)器資源從另一臺(tái)服務(wù)器（不同的域名或者端口）請(qǐng)求一個(gè)資源或者接口,就會(huì)發(fā)起一個(gè)跨域 HTTP 請(qǐng)求,這篇文章主要介紹了Springboot跨域處理的多種方式小結(jié),需要的朋友可以參考下

什么是跨域

當(dāng)一臺(tái)服務(wù)器資源從另一臺(tái)服務(wù)器（不同的域名或者端口）請(qǐng)求一個(gè)資源或者接口，就會(huì)發(fā)起一個(gè)跨域 HTTP 請(qǐng)求。

瀏覽器出于安全考慮，會(huì)限制跨域訪問(wèn)，就是不允許跨域請(qǐng)求資源，要求協(xié)議，IP和端口必須都相同，其中有一個(gè)不同就會(huì)產(chǎn)生跨域問(wèn)題，這就是同源策略。

跨域舉例

請(qǐng)求方	響應(yīng)方	是否跨域	原因
http://www.ming.com	http://www.ming.com/test.html	否	協(xié)議、域名、端口相同
http://www.ming.com	https://www.ming.com/test.html	是	協(xié)議不同
http://www.ming.com	http://www.minggod.com/test.html	是	主域名不同
http://www.ming.com	http://haha.ming.com/test.html	是	主域名相同、子域名不同
http://www.ming.com:8080	http://www.ming.com:8090/test.html	是	端口不同

跨域訪問(wèn)實(shí)例

后端測(cè)試代碼

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
@RestController
public class CorsController {
    @GetMapping("/cors")
    public  String hello(){
        return "hello cors";
    }
}

用瀏覽器打開(kāi)，我這里配置的端口是8090

在這里插入圖片描述

在前端項(xiàng)目中用axios訪問(wèn)時(shí)

<template>
    <span>跨域請(qǐng)求:{{result}}</span>
</template>
<script>
    import axios from 'axios';
    export default {
        name: "Cors",
        data(){
          return {
              result:""
          }
        },
        methods:{
            getTest(){
                axios.get("http://localhost:8090/cors").then(res=>{
                    console.log(res.data)
                    this.result=res.data
                })
            }
        },
        created() {
            this.getTest();
        }
    }
</script>
<style scoped>
</style>

在這里插入圖片描述

報(bào)錯(cuò)中的關(guān)鍵詞
Access-Control-Allow-Origin

跨域處理（后端）

說(shuō)明：
這里是針對(duì)Springboot 2.4.0以后的寫(xiě)法，之前的版本寫(xiě)法是.allowedOrigins（*）
2.4.0之后會(huì)報(bào)錯(cuò)替換成.allowedOriginPatterns即可
代碼中會(huì)有注釋說(shuō)明

1.添加跨域配置類

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 GlobalCorsConfig {
    @Bean
    public CorsFilter corsFilter() {
        //1. 添加 CORS配置信息
        CorsConfiguration config = new CorsConfiguration();
        //放行哪些原始域
        config.addAllowedOriginPattern("*");//2.4.0后的寫(xiě)法
       // config.addAllowedOrigin("*");
        //是否發(fā)送 Cookie
        config.setAllowCredentials(true);
        //放行哪些請(qǐng)求方式
        config.addAllowedMethod("*");
        //放行哪些原始請(qǐng)求頭部信息
        config.addAllowedHeader("*");
        //暴露哪些頭部信息
        config.addExposedHeader("*");
        //2. 添加映射路徑
        UrlBasedCorsConfigurationSource corsConfigurationSource = new UrlBasedCorsConfigurationSource();
        corsConfigurationSource.registerCorsConfiguration("/**",config);
        //3. 返回新的CorsFilter
        return new CorsFilter(corsConfigurationSource);
    }
}

重啟后端服務(wù)后，刷新前端頁(yè)面正常訪問(wèn)，效果如下

在這里插入圖片描述

2. 重寫(xiě)WebMvcConfigurer

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("/**")
                //是否發(fā)送Cookie
                .allowCredentials(true)
                //放行哪些原始域
                //.allowedOrigins("*")
                .allowedOriginPatterns("*")//2.4.0后的寫(xiě)法
                .allowedMethods(new String[]{"GET", "POST", "PUT", "DELETE"})
                .allowedHeaders("*")
                .exposedHeaders("*");
    }
}

在這里插入圖片描述

3. 注解 @CrossOrigin

類上注解

@RestController
@CrossOrigin("*")
public class CorsController {
    @GetMapping("/cors")
    public  String hello(){
        return "hello cors";
    }
}

方法上注解
方法可以單獨(dú)跨域，沒(méi)有 @CrossOrigin(“*”) 注解的方法則不行

import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
@RestController
public class CorsController {
    @GetMapping("/cors")
    @CrossOrigin("*")
    public  String hello(){
        return "hello cors";
    }
    @GetMapping("/cors1")
    public  String hello1(){
        return "hello cors1";
    }
}

4.自定義過(guò)濾器

可以正常跨域

import java.io.IOException;
import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.springframework.stereotype.Component;
@Component
public class MyCorsFilter implements Filter {
    public void doFilter(ServletRequest req, ServletResponse res,
                         FilterChain chain) throws IOException, ServletException {
        HttpServletResponse response = (HttpServletResponse) res;
        HttpServletRequest httpServletRequest = (HttpServletRequest) req;
        response.setHeader("Access-Control-Allow-Origin", httpServletRequest.getHeader("origin"));
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE, HEAD");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Headers", "access-control-allow-origin, authority, content-type, version-info, X-Requested-With");
        response.setHeader("Access-Control-Allow-Credentials", "true");
        chain.doFilter(req, res);
    }
    public void init(FilterConfig filterConfig) {}
    public void destroy() {}
}

5.手動(dòng)設(shè)置響應(yīng)頭(局部跨域)

此方案聽(tīng)說(shuō)可以用，但明哥自己測(cè)試了，不能用，依然有問(wèn)題，不建議！

@GetMapping("/cors1")
public  String hello1(HttpServletResponse response){
    response.addHeader("Access-Allow-Control-Origin","*");
    return "hello cors1";
}