网站首页 > 技术文章正文

Springboot项目中几种跨域的解决方法

ins518 2024-09-27 09:34:05 技术文章 20 ℃ 0 评论

环境：springboot2.3.9.RELEASE

什么是跨源资源共享

跨源资源共享 (CORS) （或通俗地译为跨域资源共享）是一种基于HTTP 头的机制，该机制通过允许服务器标示除了它自己以外的其它origin（域，协议和端口），这样浏览器可以访问加载这些资源。跨源资源共享还通过一种机制来检查服务器是否会允许要发送的真实请求，该机制通过浏览器发起一个到服务器托管的跨源资源的"预检"请求。在预检中，浏览器发送的头中标示有HTTP方法和真实请求中会用到的头。

跨源HTTP请求的一个例子：运行在 http://domain-a.com 的JavaScript代码使用XMLHttpRequest来发起一个到 https://domain-b.com/data.json 的请求。

出于安全性，浏览器限制脚本内发起的跨源HTTP请求。例如，XMLHttpRequest和Fetch API遵循同源策略。这意味着使用这些API的Web应用程序只能从加载应用程序的同一个域请求HTTP资源，除非响应报文包含了正确CORS响应头。

什么情况下需要CORS

跨源资源共享标准新增了一组 HTTP 首部字段，允许服务器声明哪些源站通过浏览器有权限访问哪些资源。另外，规范要求，对那些可能对服务器数据产生副作用的 HTTP 请求方法（特别是 GET 以外的 HTTP 请求，或者搭配某些 MIME 类型的 POST 请求），浏览器必须首先使用 OPTIONS 方法发起一个预检请求（preflight request），从而获知服务端是否允许该跨源请求。服务器确认允许之后，才发起实际的 HTTP 请求。在预检请求的返回中，服务器端也可以通知客户端，是否需要携带身份凭证（包括 Cookies 和 HTTP 认证相关数据）。

CORS请求失败会产生错误，但是为了安全，在JavaScript代码层面是无法获知到底具体是哪里出了问题。你只能查看浏览器的控制台以得知具体是哪里出现了错误。

准备环境

前端Ajax请求

Controller接口

@RestController
@RequestMapping("/cors")
public class CorsController {

  @GetMapping("/index1")
  public Object cors1() {
    return "cors1 success" ;
  }
	
}

请求测试

这里的提示就是说，请求被跨源资源共享策略阻止了。

接下来我们看看在SpringBoot环境下是如何解决。

解决CORS

接口方法上添加@CrossOrigin注解

@CrossOrigin
@GetMapping("/index1")
public Object cors1() {
  return "cors1 success" ;
}

测试：

请求成功了。

查看请求Header信息

添加了@CrossOrigin注解的接口方法会为响应header设置Access-Control-Allow-Origin: * 信息，允许任意的Origin（请求header中有Origin信息）访问资源。

默认情况下@CrossOrigin允许的信息：

All origins，所有的来源.
All headers，所有的Header信息.
All HTTP methods to which the controller method is mapped，任意的HTTP method.

allowCredentials：该信息默认是不开启的。

@CrossOrigin注解也可以应用在类上，这样所有的方法都支持跨源资源共享了。

@CrossOrigin支持的属性配置：

@CrossOrigin(origins = {"http://localhost:8081"})

origins：数组，设置源，那么只有设定的源能访问资源。

@CrossOrigin(maxAge = 1800)

maxAge：有效期；对应到Access-Control-Max-Age响应header，表示 preflight request （预检请求）的返回结果（即 Access-Control-Allow-Methods 和Access-Control-Allow-Headers 提供的信息）可以被缓存多久。简单说就是只要设定了这个缓存时间，那么在给定的时间内是不会再发起OPTIONS 预检请求。

allowedHeaders：允许的请求header，对应到Access-Control-Expose-Headers响应header。

methods：允许的请求方法，对应到Access-Control-Allow-Methods响应header。

allowCredentials：当浏览器的credentials设置为true时是否允许浏览器读取response的内容，对应到Access-Control-Allow-Credentials响应header。

发起一个post请求：

@CrossOrigin(origins = {"http://localhost:8080"}, maxAge = 1800, allowedHeaders = {"access-token", "token"})
@PostMapping("/index2")
public Object cors2() {
  return "cors2 success" ;
}

$.ajax({
  type: 'POST',
  url: "http://localhost:8081/cors/index2",
  success (data) {
    console.log(data) ;
  }
}) ;

成功。

post请求携带自定义header

$.ajax({
  type: 'POST',
  url: "http://localhost:8081/cors/index2",
  headers: {"token":"zs"},
  success (data) {
    console.log(data) ;
  }
}) ;

浏览器发起了两个请求，其中一个是OPTIONS请求这就是预检请求（询问浏览器是否允许跨源请求资源）。

观察预检请求响应信息

这里响应的相对应信息也就是我们在接口上设置的相关信息。

这是请求信息，header告诉服务器本次请求将携带token头信息；method告知服务器本次实际发起的请求是post。

全局设置跨源资源共享

@Configuration
public class WebConfig implements WebMvcConfigurer {
  @Override
  public void addCorsMappings(CorsRegistry registry) {
    registry.addMapping("/**")
      .allowedOrigins("*")
      .allowedMethods("PUT", "DELETE", "POST", "GET")
      .allowedHeaders("access-token", "token", "name")
      .maxAge(3600);
    }
}
// 接口
@PostMapping("/index3")
public Object cors3() {
  return "cors3 success" ;
}

$.ajax({
  type: 'POST',
  url: "http://localhost:8081/cors/index3",
  headers: {"token":"zs"},
  success (data) {
    console.log(data) ;
  }
}) ;

成功！！！

Spring 内置的CorsFilter过滤器

@Bean
public CorsFilter corsFilter() {
  CorsConfiguration config = new CorsConfiguration();

  config.addAllowedOrigin("*");
  config.addAllowedHeader("*");
  config.addAllowedMethod("POST") ;
  config.addAllowedMethod("GET") ;

  UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
  source.registerCorsConfiguration("/**", config);

  CorsFilter filter = new CorsFilter(source);
  return filter ;
}

请求：

Servlet过滤器

@WebFilter("/*")
public class WebCORSFilter implements Filter {

  public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) 
        throws IOException, ServletException {
    HttpServletResponse response = (HttpServletResponse) res;
    HttpServletRequest request = (HttpServletRequest) req ;
    String origin = request.getHeader("Origin") ;
    request.setCharacterEncoding("UTF-8") ;
    response.setHeader("Access-Control-Allow-Origin", origin);
    response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE, PUT");
    response.setHeader("Access-Control-Max-Age", "3600");
    response.setHeader("Access-Control-Allow-Credentials", "true");
    response.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, Account, access-token");
    chain.doFilter(req, res);
  }

  public void init(FilterConfig filterConfig) {}

  public void destroy() {}

}

以上就是介绍的几种设置跨源资源共享的几种服务端配置方式。希望能帮助到你

以上都没有提到身份信息。在跨源请求时默认浏览器是不会携带上身份凭证信息一般就是说的cookie。如果需要携带这些信息需要客户端在请求时设定一个特殊的标志位：