什么是跨域问题 浏览器出于安全考虑,会限制跨域访问,就是不允许跨域请求资源,要求协议,IP和端口必须都相同,其中有一个不同就会产生跨域问题,这就是同源策略。 简单的说A应用只能访问A应用对应的后台返回的数据,B应用只能访问B应用后台的数据,如果A应用通过Ajax请求了B应用对应的后台数据的时候就会出现跨域的问题。但是在实际开发中,这种调用方式又是被大家广泛使用的。非同源限制 什么是非同源限制?浏览器为了安全限制了一些操作,限制了一些请求是无法访问非同源的操作的。无法读取非同源网页的Cookie、LocalStorage和IndexedDB无法获取到非同源网页的DOM无法向非同源地址发送Ajax请求操作CORS技术 为了解决上述问题,W3C提出了跨院资源共享方案,也就是CORS技术(CrossOriginResourceSharing) CORS可以在不破坏现有规则的情况下,通过后端服务器实现CORS接口,从而实现跨域通信。CORS请求分为两类:简单请求和非简单请求,分别对跨域通信提供了支持操作。什么是简单请求 在CORS技术出现之前,在HTTP请求头中不能包含任何的自定义字段,而且HTTP请求信息也不能操作如下的一些AcceptAcceptLanguageContentLanguageLastEventIDContentType(applicationxwwwformurlencoded、multipartformdata、textplain) 根据对简单请求的的分析,CORS的策略是在请求时在请求头中增加一个Origin字段,服务器收到请求后,根据该字段判断是否允许该请求访问。如果允许,就在HTTP请求头信息中添加AccessControlAllowOrigin字段,并且返回正确的字段如果不允许,就不加入该字段 处理AccessControlAllowOrigin字段,还有其他的字段可以描述CORS返回结果AccessControlAllowCredentials:可选,用户是否可以发送、处理cookie。AccessControlExposeHeaders:可选,可以让用户拿到的字段,有即可字段无论设置与否都可以获取到,包括CacheControl、ContentLanguage、ContentType、Expires、LastModified、Pragma。什么是非简单请求 对于非简单请求的跨源请求,浏览器会在真实请求发出前增加一次OPTION请求,称为预检请求。在预检请求将真实请求的信息,包括请求方法、自定义头字段、源信息添加到HTTP头信息字段中,询问服务器是否允许这样的操作。 例如在一个GET请求中,与CORS相关的字段有:请求使用的HTTP方法AccessControlRequestMethod请求中包含的自定义头字段AccessControlRequestHeaders 服务器收到请求时,需要对Origin、AccessControlRequestMethod、AccessControlRequestHeaders进行验证,验证通过后,会在返回HTTP头信息中添加如下的的内容AccessControlAllowOrigin:AccessControlAllowMethods:真实请求允许的方法AccessControlAllowHeaders:服务器允许使用的字段AccessControlAllowCredentials:是否允许用户发送、处理CookieAccessControlMaxAge:预检请求的有效期,单位为秒,有效期内,不会重复发送预检请求在SpringBoot中如何实现跨域 对于CORS的跨域请求,主流的解决方案有如下几种添加跨域配置类重写WebMvcConfigurer使用CrossOrigin注解手动设置响应头自定义过滤器 对于前后端分离的项目还可以通过配置Nginx的方式实现跨域操作 CorFilterWebMvConfigurerCrossOrigin需要SpringMVC4。2以上版本才支持,对应springBoot1。3版本以上上面前两种方式属于全局CORS配置,后两种属于局部CORS配置。如果使用了局部跨域是会覆盖全局跨域的规则 所以可以通过CrossOrigin注解来进行细粒度更高的跨域资源控制。其实无论哪种方案,最终目的都是修改响应头,向响应头中添加浏览器所要求的数据,进而实现跨域添加跨域配置类 新建一个全局的跨域配置文件,然后添加对应的Cors跨域信息,包括放行原始域、发送Cookie等操作,代码如下。ConfigurationpublicclassGlobalCorsConfig{BeanpublicCorsFiltercorsFilter(){1。添加CORS配置信息CorsConfigurationconfignewCorsConfiguration();放行哪些原始域config。addAllowedOrigin();是否发送Cookieconfig。setAllowCredentials(true);放行哪些请求方式config。addAllowedMethod();放行哪些原始请求头部信息config。addAllowedHeader();暴露哪些头部信息config。addExposedHeader();2。添加映射路径UrlBasedCorsConfigurationSourcecorsConfigurationSourcenewUrlBasedCorsConfigurationSource();corsConfigurationSource。registerCorsConfiguration(,config);3。返回新的CorsFilterreturnnewCorsFilter(corsConfigurationSource);}}重写WebMvcConfigurer 重新实现WebMvcConfigurerConfigurationpublicclassCorsConfigimplementsWebMvcConfigurer{OverridepublicvoidaddCorsMappings(CorsRegistryregistry){registry。addMapping()允许跨域访问。allowedOrigins()允许跨域访问的源。allowedMethods(POST,GET,PUT,DELETE,OPTIONS)允许请求的方式。maxAge(168000)预检间隔时间。allowCredentials(true);是否发送Cookie}}注解CrossOrigin 注意使用这个注解只是对局部接口实现了跨域操作,代码如下RestControllerCrossOrigin(origins)publicclassHelloController{RequestMapping(hello)publicStringhello(){}} 如果是在方法上使用这个注解则表示只允许这个方法进行跨域访问RequestMapping(hello)CrossOrigin(origins)CrossOrigin(valuehttp:localhost:8081)指定具体ip允许跨域publicStringhello(){}手动设置过滤头RestControllerRequestMapping(api)publicclassApiController{GetMapping(getList)publicStringgetList(HttpServletResponseresponse){response。addHeader(AccessAllowControlOrigin,);returnOK;}} 自定义过滤器ComponentpublicclassCorsFilterimplementsFilter{Overridepublicvoidinit(FilterConfigfilterConfig)throwsServletException{}OverridepublicvoiddoFilter(ServletRequestservletRequest,ServletResponseservletResponse,FilterChainfilterChain)throwsIOException,ServletException{HttpServletResponseresponse(HttpServletResponse)servletRresponse。setHeader(AccessControlAllowOrigin,);response。setHeader(AccessControlAllowMethods,POST,GET,OPTIONS,DELETE);response。setHeader(AccessControlMaxAge,3600);response。setHeader(AccessControlAllowHeaders,xrequestedwith,contenttype);filterChain。doFilter(servletRequest,servletResponse);}Overridepublicvoiddestroy(){}} 当然自定的话就会涉及到这个配置如何去使用的问题。在之前的文章中我们有讲过如何使用自定义的拦截器。这里我们就在过多说明,有兴趣的读者可以查看之前的文章。Nginx服务器反向代理 通过反向代理监听同样的端口、同样的域名的不同访问地址。例如可以在Nginx配置中进行如下的配置server{listen80;servernameabc。charsetkoi8r;accessloglogshost。access。locationclient{访问客户端路径proxypasshttp:localhost:81;}locationapis{访问服务器路径rewriteapis(。)1proxypasshttp:localhost:82;}} 可以将不同路径的请求分别转发到客户端和服务器端,利用Nginx反向代理技术来实现跨域操作。总结 当然对于跨域问题还有很多前端实现方式。这里我们主要讲关于后端的实现的方式,对于前端实现方式有兴趣的读者可以自己了解。东西不多,都是干活,希望大家多多关注。