目录
一、引入跨域概念
首先了解一下什么是跨域,其实很好理解,其实就是浏览器的一种自我保护机制,也就是浏览器不允许执行其它网站的脚本,或者说是不能访问其它接口,这是因为浏览器遵循同源原则,即浏览器当前所处的浏览器地址,与你想要访问的地址协议号、IP地址、端口号这三者中只要存在一项不同就认为是非同源的,只有全部一样才是同源的,下面举例子说明:
http://www.123.com/index.html 调用 http://www.123.com/server.php (非跨域http://www.123.com/index.html 调用 http://www.456.com/server.php (主域名不同:123/456,跨域)
http://abc.123.com/index.html 调用 http://def.123.com/server.php (子域名不同:abc/def,跨域)http://www.123.com:8080/index.html 调用 http://www.123.com:8081/server.php (端口不同:8080/8081,跨域)
http://www.123.com/index.html 调用 https://www.123.com/server.php (协议不同:http/https,跨域)
请注意:localhost和127.0.0.1虽然都指向本机,但也属于跨域。
而对于前后端分离项目,浏览器肯定得是访问接口的,因此一定会出现跨域问题,这样就不能正确访问接口了,值得说的是虽然浏览器禁止用户对请求返回数据的显示和操作,但浏览器确实是去请求了,如果服务器没有做限制的话会返回数据的,在调试模式的network中可以看到返回状态为200,且可看到返回数据
二、解决方案
1. 局部配置
在控制器上面加上@CrossOrigin注解即可
2. 全局配置
在webConfig配置类中重写addCorsMapping方法即可
@Configuration
public class WebConfig implements WebMvcConfigurer {
/**
* 配置跨域
*
* @param registry
*/
@Override
public void addCorsMappings(CorsRegistry registry) {
// 设置允许跨域的路径
registry.addMapping("/**")
// 设置允许跨域请求的域名
.allowedOriginPatterns("*")
// 是否允许cookie
.allowCredentials(true)
// 设置允许的请求方式
.allowedMethods("GET", "POST", "DELETE", "PUT")
// 设置允许的header属性
.allowedHeaders("*")
// 跨域允许时间
.maxAge(3600);
// 设置可被访问的响应头
//.exposedHeaders("jieiwi");
}
}