springboot跨域问题解决方法大全

什么情况下需要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。如果需要携带这些信息需要客户端在请求时设定一个特殊的标志位：

XMLHttpRequest.withCredentials = true;

注意：如果服务器端的响应中未携带
Access-Control-Allow-Credentials: true ，浏览器将不会把响应内容返回给请求的发送者。同时，服务器端的
Access-Control-Allow-Origin不能设置为 ‘*’，注意我上面的Filter是怎么做的。

jquery常见事件 双击事件(dblclick) 绑定使用方式1（图文汇总）