SpringBoot处理跨域总结

阿里云国内75折回扣微信号：monov8

阿里云国际，腾讯云国际，低至75折。AWS 93折免费开户实名账号代冲值优惠多多微信号：monov8 飞机：@monov6

解决跨域的五种方法

1、CorsFilter

新建一个类

@Configuration
public class CorsConfig {
    @Bean
    public CorsFilter corsFilter() {
        //1. 添加 CORS配置信息
        CorsConfiguration config = new CorsConfiguration();
        //放行哪些原始域
        //springboot版本为2.4.0以前写法
        config.addAllowedOrigin("*");
        //springboot版本为2.4.0以后写法
        config.setAllowedOriginPatterns(Collections.singletonList("*"));

        //查看项目的springboot版本
        //System.out.println(SpringBootVersion.getVersion());


        //是否发送 Cookie
        config.setAllowCredentials(true);
        //放行哪些请求方式
        config.addAllowedMethod("*");
        //放行哪些原始请求头部信息
        config.addAllowedHeader("*");
        //暴露哪些头部信息
        config.addExposedHeader("*");
        //2. 添加映射路径
        UrlBasedCorsConfigurationSource corsConfigurationSource = new UrlBasedCorsConfigurationSource();
        corsConfigurationSource.registerCorsConfiguration("/**",config);
        //3. 返回新的CorsFilter
        return new CorsFilter(corsConfigurationSource);
    }
}

2、重写 WebMvcConfigurer

@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                //是否发送Cookie
                .allowCredentials(true)
                //放行哪些原始域
                .allowedOrigins("*")
                .allowedMethods(new String[]{"GET", "POST", "PUT", "DELETE", "OPTIONS", "PATCH"})
                .allowedHeaders("*")
                .exposedHeaders("*");
    }
}

3、使用注解

@RestController
@CrossOrigin(origins = "*")
public class CorsController {
    @RequestMapping("/cors")
    @CrossOrigin(origins = "*")
    public String cors() {
        return "cors";
    }
}

4、手动设置响应头

@RequestMapping("/cors")
public String cors(HttpServletResponse response) {
    response.addHeader("Access-Allow-Control-Origin","*");
    return "cors";
}

5、使用自定义filter

import org.springframework.context.annotation.Configuration;
import javax.servlet.*;
import javax.servlet.annotation.WebFilter;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
@WebFilter(filterName = "CorsFilter ")
@Configuration
public class CorsFilter implements Filter {
    @Override
    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-Credentials", "true");
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, PATCH, DELETE, PUT, OPTIONS");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
        chain.doFilter(req, res);
    }
}

模拟跨域

跨域的拦截是浏览器行为所以后端开发的时候不会遇到这个问题只有在联调的时候才会发现这种问题前端、后端都可以解决。前端通过代理请求同一域的一个接口然后转发到后端。后端则通过在Response Header设置值解决。而后端本地测试跨域配置是否生效时比较麻烦因为是浏览器问题发布到测试环境流程长所以需要本地也能复现跨域问题其实也比较简单只不过需要百度一些前端代码[狗头]

首先先随便找一个网站然后在Console向本地发送Http请求就能模拟跨域了。

// 普通请求
var xhr = new XMLHttpRequest();
xhr.open('OPTIONS', 'http://127.0.0.1:8080/test1');
xhr.send();
xhr.onload = function(e) {
    var xhr = e.target;
    console.log(xhr.responseText);
}

// GET请求
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://127.0.0.1:8080/test1?a=1');
xhr.send();
xhr.onload = function(e) {
    var xhr = e.target;
    console.log(xhr.responseText);
}

// 携带header
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://127.0.0.1:8080/test1?a=1');
xhr.setRequestHeader('content-type', 'application/json');
xhr.setRequestHeader('signature', 'gaejhgkaehguiaehiuavoihvoihviehviehiohao');
xhr.send();
xhr.onload = function(e) {
    var xhr = e.target;
    console.log(xhr.responseText);
}

// POST请求
var xhr = new XMLHttpRequest();
xhr.open('POST', 'http://127.0.0.1:8080/test1?a=1');
xhr.setRequestHeader('content-type', 'application/json');
xhr.setRequestHeader('signature', 'gaejhgkaehguiaehiuavoihvoihviehviehiohao');
xhr.send("{a:1,b:2}");
xhr.onload = function(e) {
    var xhr = e.target;
    console.log(xhr.responseText);
}