当前位置: 首页 > news >正文

SpringBoot处理跨域总结

解决跨域的五种方法

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);
}

跨域问题踩过的坑

这些问题主要是网上代码都是抄来抄去,有一些人抄的时候删了一些或者copy漏了,导致代码不全,然后又因为浏览器的一些机制导致了还是存在跨域问题,坑了后面的人。

踩坑一:没有允许OPTIONS请求跨域

比如用上面的方案二来处理跨域问题

乍一看没有什么问题,只是不支持OPTIONS请求,但是浏览器在处理跨域请求的时候,会先发送一个OPTIONS请求去检测服务是否允许跨域请求,然后再去请求服务要数据之类的。所以这里根本没解决,联调时还是会有跨域问题。

踩坑二:没有允许Credentials

场景:后端不允许前端传递用户凭证,但是前端请求的时候带上了,这时浏览器也会报跨域错误

用户凭证是用户登录之后,服务器下发的一些凭证,如cookie。在跨域请求中,浏览器并不会把cookie携带上,但是可以通过js代码携带上。

使用上面方案一,不允许用户凭证

相关文章:

  • 做的网站怎么让别人也能看到/如何免费做网站
  • wordpress 调用css/品牌推广软文
  • 做模具在哪个网站找工作/韩国热搜榜
  • 东莞设计网站建设方案/如何创建一个自己的网站
  • 中国建设网站银行卡/营销型网站推广
  • 广告机自建站模板/学做电商需要多少钱
  • mysql定期删除过期数据
  • 解决前后端分离Vue项目部署到服务器后出现的302重定向问题
  • docker中基础内容
  • SocketCAN 命名空间 VCAN VXCAN CANGW 举例
  • 渔业养殖远程监控系统解决方案
  • 【金融】新成立基金建仓时点、行业分布与市场行情关系探究
  • 2023年,莫荒废了时光。
  • week11
  • Linux 通过监控监控系统内存并定时重启指定服务
  • 【数据结构】6.1 图的基本概念和术语
  • mybatis之动态SQL测试环境的搭建以及if语句的使用
  • vue+element详细完整实现个人博客、个人网站