spring cloud实现前端跨域问题的解决方案

当我们需要将spring boot以restful接口的方式对外提供服务的时候,如果此时架构是前后端分离的,那么就会涉及到跨域的问题,那怎么来解决跨域的问题了,下面就来探讨下这个问题。

解决方案一:在Controller上添加@CrossOrigin注解

使用方式如下:

@CrossOrigin // 注解方式
@RestController
public class HandlerScanController { 

  @CrossOrigin(allowCredentials="true", allowedHeaders="*", methods={RequestMethod.GET,
      RequestMethod.POST, RequestMethod.DELETE, RequestMethod.OPTIONS,
      RequestMethod.HEAD, RequestMethod.PUT, RequestMethod.PATCH}, origins="*")
  @PostMapping("/confirm")
  public Response handler(@RequestBody Request json){ 

    return null;
  }
} 

解决方案二:全局配置

代码如下:

@Configuration
  public class MyConfiguration { 

    @Bean
    public WebMvcConfigurer corsConfigurer() {
      return new WebMvcConfigurerAdapter() {
        @Override
        public void addCorsMappings(CorsRegistry registry) {
          registry.addMapping("/**")
          .allowCredentials(true)
          .allowedMethods("GET");
        }
      };
    }
  }

解决方案三:结合Filter使用

在spring boot的主类中,增加一个CorsFilter

/**
   *
   * attention:简单跨域就是GET,HEAD和POST请求,但是POST请求的"Content-Type"只能是application/x-www-form-urlencoded, multipart/form-data 或 text/plain
   * 反之,就是非简单跨域,此跨域有一个预检机制,说直白点,就是会发两次请求,一次OPTIONS请求,一次真正的请求
   */
  @Bean
  public CorsFilter corsFilter() {
    final UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
    final CorsConfiguration config = new CorsConfiguration();
    config.setAllowCredentials(true); // 允许cookies跨域
    config.addAllowedOrigin("*");// #允许向该服务器提交请求的URI,*表示全部允许,在SpringMVC中,如果设成*,会自动转成当前请求头中的Origin
    config.addAllowedHeader("*");// #允许访问的头信息,*表示全部
    config.setMaxAge(18000L);// 预检请求的缓存时间(秒),即在这个时间段里,对于相同的跨域请求不会再预检了
    config.addAllowedMethod("OPTIONS");// 允许提交请求的方法,*表示全部允许
    config.addAllowedMethod("HEAD");
    config.addAllowedMethod("GET");// 允许Get的请求方法
    config.addAllowedMethod("PUT");
    config.addAllowedMethod("POST");
    config.addAllowedMethod("DELETE");
    config.addAllowedMethod("PATCH");
    source.registerCorsConfiguration("/**", config);
    return new CorsFilter(source);
  }

当然,如果微服务多的话,需要在每个服务的主类上都加上这么段代码,这违反了DRY原则,更好的做法是在zuul的网关层解决跨域问题,一劳永逸。

关于前端跨域的更多信息,请参考:http://www.jb51.net/article/83093.htm

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

您可能感兴趣的文章:

  • spring cloud如何修复zuul跨域配置异常的问题
(0)

相关推荐

  • spring cloud如何修复zuul跨域配置异常的问题

    前言 本文主要给大家介绍一下在zuul进行跨域配置的时候出现异常该如何解决的方法,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 异常 The 'Access-Control-Allow-Origin' header contains multiple values '*, *', but only one is allowed 实例 Access-Control-Allow-Credentials:true Access-Control-Allow-Credentials:t

  • spring cloud实现前端跨域问题的解决方案

    当我们需要将spring boot以restful接口的方式对外提供服务的时候,如果此时架构是前后端分离的,那么就会涉及到跨域的问题,那怎么来解决跨域的问题了,下面就来探讨下这个问题. 解决方案一:在Controller上添加@CrossOrigin注解 使用方式如下: @CrossOrigin // 注解方式 @RestController public class HandlerScanController { @CrossOrigin(allowCredentials="true"

  • spring Cloud微服务跨域实现步骤

    这篇文章主要介绍了spring Cloud微服务跨域实现步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 第一步:在gateway网关的配置文件中加上下面这些: ly: cors: allowedOrigins: - http://manage.leyou.com - http://xxx.xxx.com # 允许哪些网址就继续加,不要写 *,否则cookie就无法使用了 allowedCredentials: true # 代表携带cook

  • spring cloud gateway请求跨域问题解决方案

    这篇文章主要介绍了spring cloud gateway请求跨域问题解决方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 代码如下 @Configuration public class CorsConfig implements GlobalFilter, Ordered { private static final String ALL = "*"; private static final String MAX_AGE =

  • Java Spring boot 2.0 跨域问题的解决

    跨域 一个资源会发起一个跨域HTTP请求(Cross-site HTTP request), 当它请求的一个资源是从一个与它本身提供的第一个资源的不同的域名时 . 比如说,域名A(http://domaina.example)的某 Web 应用程序中通过标签引入了域名B(http://domainb.foo)站点的某图片资源(http://domainb.foo/image.jpg),域名A的那 Web 应用就会导致浏览器发起一个跨站 HTTP 请求.在当今的 Web 开发中,使用跨站 HTTP

  • SpringBoot+Spring Security无法实现跨域的解决方案

    SpringBoot+Spring Security无法实现跨域 未使用Security时跨域: import org.slf4j.Logger; import org.slf4j.LoggerFactory; import org.springframework.beans.factory.annotation.Value; import org.springframework.boot.autoconfigure.AutoConfigureBefore; import org.springf

  • Spring boot 总结之跨域处理cors的方法

    背景 现在做的很多项目都是前后端分离的,这就引出一个很常见的问题,我们的页面和接口是在不同域名下的,当我们通过ajax访问后端接口的时候就会出现跨域问题,这种问题我们怎么解决呢?一般来说就是cors和jsonp这两种方案.Spring简化了cors的配置,接下来我们来看一下它提供的cors. 跨域问题描述 Web开发经常会遇到跨域问题,解决方案有:jsonp,iframe,CORS等等. CORS 与 JSONP 相比: 1. JSONP 只能实现 GET 请求,而 CORS 支持所有类型的 H

  • Spring Boot和Vue跨域请求问题原理解析

    这篇文章主要介绍了Spring Boot和Vue跨域请求问题原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 使用Spring Boot + Vue 做前后端分离项目搭建,实现登录时,出现跨域请求 Access to XMLHttpRequest at 'http://localhost/open/login' from origin 'http://localhost:8080' has been blocked by CORS pol

  • 利用Nginx代理如何解决前端跨域问题详析

    前言 Nginx(发音同"engine X")是异步框架的网页服务器,也可以用作反向代理.负载平衡器和HTTP缓存. 本文将讲述如何使用 Nginx 在 Web 前后端分离开发中实现路由的转发. Web 开发通常使用的是前后端分离的开发模式,即前端和后端分别进行开发,前端通过 Ajax 请求后端的接口,将获取数据将数据渲染到页面上.前端开发会使用脚手架搭建前端开发环境,其底层通常会启动一个本地服务器,通常使用的是 nodejs 的 Express 框架.而后端则是提供接口,一般是放在线

  • ajax请求前端跨域问题原因及解决方案

    目录 一.跨域是怎么形成的 二.导致跨域的根本原因 三.解决方法 1 .JSONP 2. CORS 3 .代理转发 一.跨域是怎么形成的 当我们请求一个url的 协议.域名.端口三者之间任意一个与当前页面url的协议.域名.端口 不同这种现象我们把它称之为跨域 跨域会导致: 1.无法读取非同源网页的 Cookie.LocalStorage 和 IndexedDB 2.无法接触非同源网页的 DOM 3.无法向非同源地址发送 AJAX 请求(可以发送,但浏览器会拒绝接受响应) 二.导致跨域的根本原因

  • vue如何解决axios请求前端跨域问题

    目录 前言 一.为什么会出现跨域的问题? 二.解决方案 跨域资源共享(CORS) 写在最后 前言 最近在写纯前端的vue项目的时候,碰到了axios请求本机的资源的时候,出现了访问报404的问题.这就让我很难受.查询了资料原来是跨域的问题. 在正常开发中跨域问题有很多的解决方案.最常见的就是后端修改响应头.但是前端也可以解决,通过反向代理.为了防止下一次这样的错误出现,记录一下,总结一下. 所以现在我们来复盘一下,然后解决掉. 一.为什么会出现跨域的问题? 跨域:浏览器从一个域名的网页去请求另一

随机推荐