跨域指的是浏览器在执行网页中的 JavaScript 代码时,由于浏览器同源策略的限制 (如图)。 只能访问同源(协议、域名、端口号均相同)的资源,而不能访问其他源(协议、域名、 端口号任意一个不同)的资源。
(如图)比如像这样一种情况就体现了跨域的问题。
而解决跨域问题的方法,就是在不破坏同源策略的情况下,能够安全地实现数据共享和 交互。
常见的解决跨域问题的方法有两种,一种是 jsonp,另一种是 CORS。 其中,CORS 是一种在服务器后端解决跨域的方案,它的工作原理很简单。 如果一个网站需要访问另一个网站的资源,浏览器会先发送一个 OPTIONS 请求, 根据服务器返回的 Access-Control-Allow-Origin 头信息,决定是否允许跨域访问。 所以,我们只需要在服务器端配置 Access-Control-Allow-Origin 属性,并配置允许 哪些域名支持跨域请求即可。 在 Spring Boot 中,提供了两种配置 Access-Control-Allow-Origin 属性的方式来解 决跨域问题
- 通过@CrossOrigin(origins = "http://localhost:8080")注解,指定允许哪些 origins 允许跨域
- 使用 WebMvcConfigurer 接口,重写 addCorsMappings 方法来配置允许跨域 的请求源
@Configuration
public class CorsConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("http://localhost:8080")
.allowedMethods("*");
}
}