跨域的后端处理方法第三种方式炸裂

105 阅读3分钟

一:什么是跨域
跨域,即跨域资源共享(Cross-Origin Resource Sharing,CORS),是指在web应用程序中,当一个网页的源(origin)和它请求的资源的源不一致时便会出现跨域问题。源指的是协议、域名和端口号的组合,如http://www.example.com:80。跨域问题通常会影响到AJAX请求、跨域通信、Web字体的跨域加载等场景。在进行网络通信时,浏览器会根据同源策略(Same Origin Policy)对跨域请求进行限制。同源策略要求两个页面具有相同的协议、主机和端口,否则就会认为它们属于不同的源,即发生跨域。跨域请求可能受到多种限制,如浏览器拦截请求、不发送认证信息、限制HTTP请求方法和自定义请求标头等。二:跨域的特征

  1. 跨域请求被浏览器拦截:当页面中的JS尝试发送跨域请求时,浏览器会拦截这些请求,并在控制台中产生相应的错误提示。
  2. 无法发送认证信息:跨域请求通常无法发送认证信息,如cookies和HTTP认证信息,这样可能会导致一些用户信息无法传递或验证。
  3. 受到HTTP请求方法限制:如默认情况下,跨域请求只能使用GET、POST或HEAD方法进行请求,其他方法如PUT、DELETE等则需要进行预检请求(preflight request)。
  4. 受到自定义请求标头限制:跨域情况下,对于一些自定义请求标头,比如X-Requested-With、X-Token等,浏览器发起请求时会进行预检探测请求,以确定服务器是否支持这些自定义标头

三:解决跨域的几种方式常见的解决方案包括JSONP跨域请求、修改服务器端配置支持跨域请求、使用代理服务器、跨域资源共享(CORS)等。这些方法可以帮助开发人员在特定场景下有效地处理跨域问题,保证web应用程序的正常运行。SpringBoot解决方式如下:

方式一:使用@CrossOrigin注解

在Spring Boot 3中,可以使用@CrossOrigin注解来解决跨域问题。在Controller的方法上添加@CrossOrigin注解,可以指定允许跨域的来源、方法和头信息,示例代码如下:

@RestController
public class MyController {
    
    @CrossOrigin(origins = "http://example.com")
    @GetMapping("/hello")
    public String hello() {
        return "Hello, World!";
    }
}

方式二:使用WebMvcConfigurer配置

另一种方式是通过实现WebMvcConfigurer接口来配置跨域。可以创建一个配置类,重写addCorsMappings方法,示例代码如下:

@Configuration
public class CorsConfig implements WebMvcConfigurer {
    
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/api/**")
                .allowedOrigins("http://example.com")
                .allowedMethods("GET", "POST")
                .allowedHeaders("header1", "header2");
    }
}

方式三:使用Filter配置

还可以通过自定义Filter来解决跨域问题。创建一个Filter类,处理跨域请求,示例代码如下:

@Component
public class CorsFilter implements Filter {
    
    @Override
    public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {
        HttpServletResponse res = (HttpServletResponse) response;
        res.setHeader("Access-Control-Allow-Origin", "http://example.com");
        res.setHeader("Access-Control-Allow-Methods", "GET, POST");
        res.setHeader("Access-Control-Allow-Headers", "header1, header2");
        chain.doFilter(request, response);
    }
}

总结

通过@CrossOrigin注解、WebMvcConfigurer配置和自定义Filter这几种方式,可以很好地解决Spring Boot 3中的跨域问题。在实际项目中,可以根据具体情况选择合适的方式来解决跨域问题,确保前后端交互顺利进行。