浏览器出于安全考虑,会限制跨域访问,就是不允许跨域请求资源,要求协议,IP和端口必须都相同,其中有一个不同就会产生跨域问题,这就是同源策略。
简单的说A应用只能访问A应用对应的后台返回的数据,B应用只能访问B应用后台的数据,如果A应用通过Ajax请求了B应用对应的后台数据的时候就会出现跨域的问题。但是在实际开发中,这种调用方式又是被大家广泛使用的。
什么是非同源限制?浏览器为了安全限制了一些操作,限制了一些请求是无法访问非同源的操作的。
为了解决上述问题,W3C提出了跨院资源共享方案,也就是CORS技术(Cross-Origin Resource Sharing)
CORS 可以在不破坏现有规则的情况下,通过后端服务器实现CORS接口,从而实现跨域通信。CORS请求分为两类:简单请求和非简单请求,分别对跨域通信提供了支持操作。
在CORS技术出现之前,在HTTP请求头中不能包含任何的自定义字段,而且HTTP请求信息也不能操作如下的一些
根据对简单请求的的分析,CORS的策略是在请求时在请求头中增加一个Origin字段,服务器收到请求后,根据该字段判断是否允许该请求访问。
处理Access-Control-Allow-Origin字段,还有其他的字段可以描述CORS返回结果
对于非简单请求的跨源请求,浏览器会在真实请求发出前增加一次OPTION请求,称为预检请求。在预检请求将真实请求的信息,包括请求方法、自定义头字段、源信息添加到HTTP头信息字段中,询问服务器是否允许这样的操作。
例如在一个GET请求中,与CORS相关的字段有:
服务器收到请求时,需要对Origin、Access-Control-Request-Method、Access-Control-Request-Headers 进行验证,验证通过后,会在返回HTTP头信息中添加如下的的内容
对于CORS的跨域请求,主流的解决方案有如下几种
对于前后端分离的项目还可以通过配置Nginx的方式实现跨域操作
CorFilter / WebMvConfigurer / @CrossOrigin 需要 SpringMVC 4.2以上版本才支持,对应springBoot 1.3版本以上上面前两种方式属于全局 CORS 配置,后两种属于局部 CORS配置。如果使用了局部跨域是会覆盖全局跨域的规则
所以可以通过 @CrossOrigin 注解来进行细粒度更高的跨域资源控制。其实无论哪种方案,最终目的都是修改响应头,向响应头中添加浏览器所要求的数据,进而实现跨域
新建一个全局的跨域配置文件,然后添加对应的Cors跨域信息,包括放行原始域、发送Cookie等操作,代码如下。
@Configuration
public class GlobalCorsConfig {
@Bean
public CorsFilter corsFilter() {
//1. 添加 CORS配置信息
CorsConfiguration config = new CorsConfiguration();
//放行哪些原始域
config.addAllowedOrigin("*");
//是否发送 Cookie
config.setAllowCredentials(true);
//放行哪些请求方式
config.addAllowedMethod("*");
//放行哪些原始请求头部信息
config.addAllowedHeader("*");
//暴露哪些头部信息
config.addExposedHeader("*");
//2. 添加映射路径
UrlBasedCorsConfigurationSource corsConfigurationSource = new UrlBasedCorsConfigurationSource();
corsConfigurationSource.registerCorsConfiguration("/**",config);
//3. 返回新的CorsFilter
return new CorsFilter(corsConfigurationSource);
}
}
重新实现WebMvcConfigurer
@Configuration
public class CorsConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**") //允许跨域访问
.allowedOrigins("*") // 允许跨域访问的源
.allowedMethods("POST","GET","PUT","DELETE","OPTIONS") //允许请求的方式
.maxAge(168000) // 预检间隔时间
.allowCredentials(true); // 是否发送Cookie
}
}
注意使用这个注解只是对局部接口实现了跨域操作,代码如下
@RestController
@CrossOrigin(origins = "*")
public class HelloController {
@RequestMapping("/hello")
public String hello() {
return "hello world";
}
}
如果是在方法上使用这个注解则表示只允许这个方法进行跨域访问
@RequestMapping("/hello")
@CrossOrigin(origins = "*")
//@CrossOrigin(value = "http://localhost:8081") //指定具体ip允许跨域
public String hello() {
return "hello world";
}
@RestController
@RequestMapping("/api")
public class ApiController {
@GetMapping("getList")
public String getList(HttpServletResponse response){
response.addHeader("Access-Allow-Control-Origin","*");
return "OK";
}
}
@Component
public class CorsFilter implements Filter {
@Override
public void init(FilterConfig filterConfig) throws ServletException {
}
@Override
public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
HttpServletResponse response = (HttpServletResponse) servletResponse;
response.setHeader("Access-Control-Allow-Origin","*");
response.setHeader("Access-Control-Allow-Methods","POST,GET,OPTIONS,DELETE");
response.setHeader("Access-Control-Max-Age","3600");
response.setHeader("Access-Control-Allow-Headers","x-requested-with,content-type");
filterChain.doFilter(servletRequest,servletResponse);
}
@Override
public void destroy() {
}
}
当然自定的话就会涉及到这个配置如何去使用的问题。在之前的文章中我们有讲过如何使用自定义的拦截器。这里我们就在过多说明,有兴趣的读者可以查看之前的文章。
通过反向代理监听同样的端口、同样的域名的不同访问地址。例如可以在Nginx配置中进行如下的配置
server {
listen 80;
server_name abc.com;
#charset koi8-r;
#access_log logs/host.access.log main;
location /client { #访问客户端路径
proxy_pass http://localhost:81;
proxy_redirect default;
}
location /apis { #访问服务器路径
rewrite ^/apis/(.*)$ /$1 break;
proxy_pass http://localhost:82;
}
}
可以将不同路径的请求分别转发到客户端和服务器端,利用Nginx反向代理技术来实现跨域操作。
当然对于跨域问题还有很多前端实现方式。这里我们主要讲关于后端的实现的方式,对于前端实现方式有兴趣的读者可以自己了解。东西不多,都是干活,希望大家多多关注。
页面更新:2024-04-15
本站资料均由网友自行发布提供,仅用于学习交流。如有版权问题,请与我联系,QQ:4156828
© CopyRight 2008-2024 All Rights Reserved. Powered By bs178.com 闽ICP备11008920号-3
闽公网安备35020302034844号