springboot 如何解决cross跨域请求的问题

目录
  • springboot 解决cross跨域请求
    • 1.使用ajax发送跨域请求接口时
    • 2.在被跨域请求的一方配置
    • 3.再次测试
    • 4.对于只有个别需要开放跨域请求的接口可以这样玩
    • 5.其它解决跨域请求的常用方法
  • Spring解决cross domain
    • Spring4:
    • Spring3旧版本:

springboot 解决cross跨域请求

1.使用ajax发送跨域请求接口时

接口能正常接收到请求并响应,但是无法正常展示响应数据。跨域请求时会在有一个特别的请求头origin(请求来源)。

浏览器认为这是不安全的。需要在被跨域请求的那个接口,响应时加上加上几个响应头让浏览器允许跨域请求的响应数据展示。

springboot准备了一个过滤器来实现这个操作。(如下:8081有个ajax请求8888的接口,需要在8888加上过滤器)

2.在被跨域请求的一方配置

一个CrosFilter过滤器到spring里即可

 @Bean
    public CorsFilter corsFilter() {
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.addAllowedOrigin("http://localhost:8081"); // 允许的域名白名单,可以*
        corsConfiguration.addAllowedHeader("*"); // 允许任何头
        corsConfiguration.addAllowedMethod(HttpMethod.POST); // 允许哪些类型请求,可以*
        corsConfiguration.addExposedHeader("my-header");//自定义请求头
        corsConfiguration.setAllowCredentials(true);//是否允许携带cookie
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/sys/generator/list", corsConfiguration); // 哪些path的接口可以被跨域请求
        source.registerCorsConfiguration("/sys/generator/code", corsConfiguration);
        return new CorsFilter(source);
    }

3.再次测试

响应头主要多了这些,也能正常接收到响应数据了

4.对于只有个别需要开放跨域请求的接口可以这样玩

@CrossOrigin的参数跟CrosFilter参数设置过滤器一致。

5.其它解决跨域请求的常用方法

使用Nginx反向代理 或前端不跨域请求,后端专门开放一个API接口供前端调用,接口以httpClient请求数据

Spring解决cross domain

Spring4:

在requestMapping中使用注解。 @CrossOrigin(origins = “http://localhost:9000”)

全局实现 .定义类继承WebMvcConfigurerAdapter

public class CorsConfigurerAdapter extends WebMvcConfigurerAdapter{ @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/api/*").allowedOrigins("*"); } } 

将该类注入到容器中:

<bean class="com.tmall.wireless.angel.web.config.CorsConfigurerAdapter"></bean>

Spring3旧版本:

在org.springframework.web.servlet.DispatcherServlet.doDispatch中会根据根据request来获取HandlerExecutionChain,SpringMVC在获取常规的处理器后会检查是否为跨域请求,如果是则替换原有的实例。

@Override
public final HandlerExecutionChain getHandler(HttpServletRequest request) throws Exception {
 Object handler = getHandlerInternal(request);
 if (handler == null) { handler = getDefaultHandler(); } if (handler == null) { return null; } // Bean name or resolved handler? if (handler instanceof String) { String handlerName = (String) handler; handler = getApplicationContext().getBean(handlerName); } HandlerExecutionChain executionChain = getHandlerExecutionChain(handler, request); if (CorsUtils.isCorsRequest(request)) { CorsConfiguration globalConfig = this.corsConfigSource.getCorsConfiguration(request); CorsConfiguration handlerConfig = getCorsConfiguration(handler, request); CorsConfiguration config = (globalConfig != null ? globalConfig.combine(handlerConfig) : handlerConfig); executionChain = getCorsHandlerExecutionChain(request, executionChain, config); } return executionChain; } 

检查的方法也很简单,即检查请求头中是否有origin字段

public static boolean isCorsRequest(HttpServletRequest request) { return (request.getHeader(HttpHeaders.ORIGIN) != null); } 

请求接着会交由 HttpRequestHandlerAdapter.handle来处理,根据handle不同,处理不同的逻辑。前面根据请求头判断是一个跨域请求,获取到的Handler为PreFlightHandler,其实现为:

@Override
public void handleRequest(HttpServletRequest request, HttpServletResponse response) throws IOException { corsProcessor.processRequest(this.config, request, response); } 

继续跟进

@Override
public boolean processRequest(CorsConfiguration config, HttpServletRequest request, HttpServletResponse response)
  throws IOException {
 if (!CorsUtils.isCorsRequest(request)) {
  return true; } ServletServerHttpResponse serverResponse = new ServletServerHttpResponse(response); ServletServerHttpRequest serverRequest = new ServletServerHttpRequest(request); if (WebUtils.isSameOrigin(serverRequest)) { logger.debug("Skip CORS processing, request is a same-origin one"); return true; } if (responseHasCors(serverResponse)) { logger.debug("Skip CORS processing, response already contains \"Access-Control-Allow-Origin\" header"); return true; } boolean preFlightRequest = CorsUtils.isPreFlightRequest(request); if (config == null) { if (preFlightRequest) { rejectRequest(serverResponse); return false; } else { return true; } } return handleInternal(serverRequest, serverResponse, config, preFlightRequest); } 

此方法首先会检查是否为跨域请求,如果不是则直接返回,接着检查是否同一个域下,或者response头里是否具有Access-Control-Allow-Origin字段或者request里是否具有Access-Control-Request-Method。

如果满足判断条件,则拒绝这个请求。

由此我们知道,可以通过在检查之前设置response的Access-Control-Allow-Origin头来通过检查。我们在拦截器的preHandle的处理。加入如下代码:

response.setHeader("Access-Control-Allow-Origin", "*"); 

此时浏览器中OPTIONS请求返回200。但是依然报错:

Request header field Content-Type is not allowed by Access-Control-Allow-Headers in preflight response.

我们注意到:在request的请求头里有Access-Control-Request-Headers:accept, content-type,但是这个请求头的中没有,此时浏览器没有据需发送请求。尝试在response中加入:

response.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");

执行成功:

Object {userId: 123, userName: “adminUpdate-wangdachui”}

至此:我们通过分析原理使SpringMVC实现跨域,原有实现以及客户端代码不需要任何改动。

以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • 详解springboot设置cors跨域请求的两种方式

    1.第一种: public class CorsFilter extends OncePerRequestFilter { static final String ORIGIN = "Origin"; protected void doFilterInternal( HttpServletRequest request, HttpServletResponse response, FilterChain filterChain) throws ServletException, IOE

  • 基于SpringBoot解决CORS跨域的问题(@CrossOrigin)

    一.关于跨域介绍 在前后分离的架构下,跨域问题难免会遇见比如,站点 http://domain-a.com 的某 HTML 页面通过 的 src 请求 http://domain-b.com/image.jpg. 网络上的许多页面都会加载来自不同域的CSS样式表,图像和脚本等资源. 出于安全原因,浏览器限制从脚本内发起的跨源HTTP请求. 例如,XMLHttpRequest和Fetch API遵循同源策略. 这意味着使用这些API的Web应用程序只能从加载应用程序的同一个域请求HTTP资源,除非

  • Springboot处理CORS跨域请求的三种方法

    前言 Springboot跨域问题,是当前主流web开发人员都绕不开的难题.但我们首先要明确以下几点 跨域只存在于浏览器端,不存在于安卓/ios/Node.js/python/ java等其它环境 跨域请求能发出去,服务端能收到请求并正常返回结果,只是结果被浏览器拦截了. 之所以会跨域,是因为受到了同源策略的限制,同源策略要求源相同才能正常进行通信,即协议.域名.端口号都完全一致. 浏览器出于安全的考虑,使用 XMLHttpRequest对象发起 HTTP请求时必须遵守同源策略,否则就是跨域的H

  • SpringBoot解决跨域的5种方式小结

    什么是跨域 跨域:指的是浏览器不能执行其他网站的脚本.它是由浏览器的同源策略造成的,是浏览器对javascript施加的安全限制. 例如:a页面想获取b页面资源,如果a.b页面的协议.域名.端口.子域名不同,所进行的访问行动都是跨域的,而浏览器为了安全问题一般都限制了跨域访问,也就是不允许跨域请求资源.注意:跨域限制访问,其实是浏览器的限制.理解这一点很重要!!! 同源策略:是指协议,域名,端口都要相同,其中有一个不同都会产生跨域: java解决CORS跨域请求的方式 对于CORS的跨域请求,主

  • springboot 如何解决cross跨域请求的问题

    目录 springboot 解决cross跨域请求 1.使用ajax发送跨域请求接口时 2.在被跨域请求的一方配置 3.再次测试 4.对于只有个别需要开放跨域请求的接口可以这样玩 5.其它解决跨域请求的常用方法 Spring解决cross domain Spring4: Spring3旧版本: springboot 解决cross跨域请求 1.使用ajax发送跨域请求接口时 接口能正常接收到请求并响应,但是无法正常展示响应数据.跨域请求时会在有一个特别的请求头origin(请求来源). 浏览器认

  • Springboot处理配置CORS跨域请求时碰到的坑

    最近开发过程中遇到了一个问题,之前没有太注意,这里记录一下.我用的SpringBoot版本是2.0.5,在跟前端联调的时候,有个请求因为用户权限不够就被拦截器拦截了,拦截器拦截之后打印日志然后response了一个错误返回了,但是前端Vue.js一直报如下跨域的错误,但是我是配置了跨域的. has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested res

  • 完美解决ajax跨域请求下parsererror的错误

    ajax请求报parsererror错误是很宽泛的概念,很多情况下都报这个错, 在很多时候,即使ajax提交.返回都正常 XMLHttpRequest.status=200  (正常响应) XMLHttpRequest.readyState=4 (正常接收) ajax也会提示一个parseerror的错误. 出现这个错误,大都是不良书写习惯,或者语法不当造成的. 关于ajax的错误,请使用: error:function(XMLHttpRequest, textStatus, errorThro

  • 解决ajax跨域请求数据cookie丢失问题

    前端: 以jquery为例: 需要加入 复制代码 代码如下: xhrFields: {             withCredentials: true         },         crossDomain: true, $.ajax({         type: postType,         url: url,         data: postData || '',         xhrFields: {             withCredentials: tru

  • 完美解决axios跨域请求出错的问题

    错误信息: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:9000' is therefore not allowed access. The response had HTTP status code 403

  • 利用SpringMVC过滤器解决vue跨域请求的问题

    之前写过通过注释的方法解决跨域请求的方法,需要每次都在controll类使用注解,这次通过springmvc的拦截器解决: 继承SpringMVC的类HandlerInterceptor重写preHandle方法,这个方法会在到达 controll之前调用,如下 public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {

  • React如何解决fetch跨域请求时session失效问题

    前言 fetch在reactjs中等同于 XMLHttpRequest,它提供了许多与XMLHttpRequest相同的功能,但被设计成更具可扩展性和高效性. Fetch 的核心在于对 HTTP 接口的抽象,包括 Request,Response,Headers,Body,以及用于初始化异步请求的 global fetch.得益于 JavaScript 实现的这些抽象好的 HTTP 模块,其他接口能够很方便的使用这些功能:除此之外,Fetch 还利用到了请求的异步特性--它是基于 Promise

  • springboot+jsonp解决前端跨域问题小结

    现在咱们一起来讨论浏览器跨域请求数据的相关问题.说这样可能不是很标准,因为拒绝跨域请求数据并不是浏览器所独有的,之所以会出现跨域请求不了数据,是因为浏览器基本都实现了一个叫"同源策略"的安全规范.该规范具体是什么呢?我们在MDN上找到了一份资料,地址如下: 浏览器同源策略讲解 总的来说,当A网址和B网址在 协议 . 端口 . 域名 方面存在不同时,浏览器就会启动同源策略,拒绝A.B服务器之间进行数据请求. 说了同源策略,纸上得来终觉浅,绝知此事要躬行,到底同源策略是怎么体现的呢?下面我

  • 用iframe设置代理解决ajax跨域请求问题

    今天在项目中需要做远程数据加载并渲染页面,直到开发阶段才意识到ajax跨域请求的问题.于是想用代理的方式来解决这个跨域问题. 什么是跨域? 简单的来说,出于安全方面的考虑,页面中的JavaScript无法访问其他服务器上的数据,即"同源策略".而跨域就是通过某些手段来绕过同源策略限制,实现不同服务器之间通信的效果. 方案:在服务器端创建一个静态的代理页面,在客户端用iframe调用这个代理,然后通过iframe的document.getElementById("proxy&q

  • Security框架:如何使用CorsFilter解决前端跨域请求问题

    目录 项目情况 CORS介绍 解决方案 项目情况 最近做的pmdb项目是前后端分离的, 由于测试的时候是前端与后端联调,所以出现了跨域请求的问题. 浏览器默认会向后端发送一个Options方式的请求,根据后端的响应来判断后端支持哪些请求方式,支持才会真正的发送请求. CORS介绍 CORS(Cross-Origin Resource Sharing 跨源资源共享),当一个请求url的协议.域名.端口三者之间任意一与当前页面地址不同即为跨域. 在日常的项目开发时会不可避免的需要进行跨域操作,而在实

随机推荐