跨域问题

  • 什么是跨域请求
  • 在浏览器上当前访问的网站向另一个网站发送请求获取数据的过程就是跨域请求
  • 跨域只存在于浏览器端,不存在于安卓/ios/Node.js/python/ java等其它环境
  • 跨域请求能发出去,服务端能收到请求并正常返回结果,只是结果被浏览器拦截了。
  • 之所以会跨域,是因为受到了同源策略的限制,同源策略要求源相同才能正常进行通信,即协议、域名、端口号都完全一致。
  • 浏览器出于安全的考虑,使用 XMLHttpRequest对象发起 HTTP请求时必须遵守同源策略,否则就是跨域的HTTP请求,
    默认情况下是被禁止的。换句话说,浏览器安全的基石是同源策略。
  • 同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。

CORS

  • CORS是一个W3C标准,全称是”跨域资源共享”(Cross-origin resource sharing),
    允许浏览器向跨源服务器,发出XMLHttpRequest请求,从而克服了AJAX只能同源使用的限制。
    它通过服务器增加一个特殊的Header[Access-Control-Allow-Origin]来告诉客户端跨域的限制,
    如果浏览器支持CORS、并且判断Origin通过的话,就会允许XMLHttpRequest发起跨域请求。

CORS Header

Access-Control-Allow-Origin: http://www.xxx.com
Access-Control-Max-Age:86400
Access-Control-Allow-Methods:GET, POST, OPTIONS, PUT, DELETE
Access-Control-Allow-Headers: content-type
Access-Control-Allow-Credentials: true

含义解释:
1、Access-Control-Allow-Origin 允许http://www.xxx.com域(自行设置,这里只做示例)发起跨域请求
2、Access-Control-Max-Age 设置在86400秒不需要再发送预校验请求
3、Access-Control-Allow-Methods 设置允许跨域请求的方法
4、Access-Control-Allow-Headers 允许跨域请求包含content-type
5、Access-Control-Allow-Credentials 设置允许Cookie

SpringBoot项目解决跨域问题

  • 在SpringBoot项目中,推崇的都是约定优于配置,尽量少的配置。以下提供两种方式,选其一即可
  • 方式一
  • In addition to fine-grained, annotation-based configuration you’ll probably want to define some global CORS configuration as well. This is similar to using filters but can be declared withing Spring MVC and combined with fine-grained @CrossOrigin configuration. By default all origins and GET, HEAD and POST methods are allowed.
  • 除了细粒度的、基于注解的配置之外,您可能还想定义一些全局 CORS 配置。
    这类似于使用过滤器,但可以使用 Spring MVC 声明并结合细粒度@CrossOrigin配置。
    默认情况下,所有origins以及GET,HEAD和POST方法都被允许。
  • 为整个应用程序启用 CORS
@Configuration
@EnableWebMvc
public class WebConfig extends WebMvcConfigurerAdapter {

	@Override
	public void addCorsMappings(CorsRegistry registry) {
		registry.addMapping("/**");
	}
}

或者
@Configuration
public class WebConfig implements WebMvcConfigurer {

	@Override
	public void addCorsMappings(CorsRegistry registry) {
		registry.addMapping("/**");
	}
}
  • 如果您使用的是 Spring Boot,建议只声明一个WebMvcConfigurer bean,如下所示
@Configuration
public class MyConfiguration {

    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurerAdapter() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/**");
            }
        };
    }
}
  • 您可以轻松更改任何属性,也可以仅将此 CORS 配置应用于特定路径模式:
@Override
 public void addCorsMappings(CorsRegistry registry) {
 	registry.addMapping("/api/**")
 		.allowedOrigins("http://domain2.com")
 		.allowedMethods("PUT", "DELETE")
 			.allowedHeaders("header1", "header2", "header3")
 		.exposedHeaders("header1", "header2")
 		.allowCredentials(false).maxAge(3600);
 }
  • 方式二
  • 在Controller上添加@CrossOrigin注解
  • 以下内容来源于SpringBoot官网对CORS的说明:https://spring.io/blog/2015/06/08/cors-support-in-spring-framework
  • You can add to your @RequestMapping annotated handler method a @CrossOrigin annotation in order to enable CORS on it (by default @CrossOrigin allows all origins and the HTTP methods specified in the @RequestMapping annotation):
  • 您可以向带@RequestMapping注解的处理程序方法添加一个@CrossOrigin注解,
    以便在其上启用 CORS(默认情况下@CrossOrigin允许@RequestMapping注解中指定的所有origins和HTTP方法)
@RestController
@RequestMapping("/account")
public class AccountController {

	@CrossOrigin
	@GetMapping("/{id}")
	public Account retrieve(@PathVariable Long id) {
		// ...
	}

	@DeleteMapping("/{id}")
	public void remove(@PathVariable Long id) {
		// ...
	}
}
  • It is also possible to enable CORS for the whole controller:
  • 也可以为整个控制器启用 CORS
@CrossOrigin(origins = "http://domain2.com", maxAge = 3600)
@RestController
@RequestMapping("/account")
public class AccountController {

	@GetMapping("/{id}")
	public Account retrieve(@PathVariable Long id) {
		// ...
	}

	@DeleteMapping("/{id}")
	public void remove(@PathVariable Long id) {
		// ...
	}
}
  • `In this example CORS support is enabled for both retrieve() and remove() handler methods,
    and you can also see how you can customize the CORS configuration using @CrossOrigin attributes.
    You can even use both controller and method level CORS configurations, Spring will then combine both annotation attributes to create a merged CORS configuration.`
* 在此示例中,为retrieve()和remove()处理程序方法启用了 CORS 支持,您还可以了解如何使用@CrossOrigin属性自定义 CORS 配置。
  
  您甚至可以同时使用控制器和方法级别的 CORS 配置,然后 Spring 将结合这两个注释属性来创建合并的 CORS 配置。
@CrossOrigin(maxAge = 3600)
@RestController
@RequestMapping("/account")
public class AccountController {

	@CrossOrigin(origins = "http://domain2.com")
	@GetMapping("/{id}")
	public Account retrieve(@PathVariable Long id) {
		// ...
	}

	@DeleteMapping("/{id}")
	public void remove(@PathVariable Long id) {
		// ...
	}
}
  • If you are using Spring Security, make sure to enable CORS at Spring Security level as well to allow it to leverage the configuration defined at Spring MVC level.
  • 如果您正在使用 Spring Security,请确保在 Spring Security 级别启用 CORS以允许它利用在 Spring MVC 级别定义的配置。
@EnableWebSecurity
public class WebSecurityConfig extends WebSecurityConfigurerAdapter {

	@Override
	protected void configure(HttpSecurity http) throws Exception {
		http.cors().and()...
	}
}

参考博客跨域请求问题