正文

zuul+security跨域cors问题解决(代码片段)

1994july  1994july  2023-05-04  293

关键词：

zuul+security跨域Cors问题解决

简介

场景

在服务后台都会出现跨域cors问题，不过一般spring解决起来比较方便，在框架+框架的基础上，问题就显得特别明显了，各种冲突，不了解源码的运行原理，解决起来也是有心无力。

这里介绍的是zuul配置了跨域，在前端调用仍然会出现跨域的问题。

一般没有权限的接口加上cors配置就会通过跨域的问题。不过在服务间调用具有权限的功能，莫名的报跨域问题。

post特殊请求

在解决问题时发现 post 请求也有点特殊，这里也需要处理一下。

post请求分为简单请求和复杂请求。

在 CORS 中，可以使用 OPTIONS 方法发起一个预检请求，以检测实际请求是否可以被服务器所接受。预检请求报文中的 Access-Control-Request-Method 首部字段告知服务器实际请求所使用的 HTTP 方法；Access-Control-Request-Headers 首部字段告知服务器实际请求所携带的自定义首部字段。服务器基于从预检请求获得的信息来判断，是否接受接下来的实际请求。

以及 OPTIONS 未携带任何权限相关的内容，会被认证拦截，我们也得放开 OPTIONS 类型请求

功能使用

Cross 解决

技术图片

之前设置很简单，习惯操作把之前的代码复制了过来，第一次操作是创建了一个 CorsFilter bean，但是简单的请求确实通过了，不过权限接口过不了，于是按照一些资料配置了下面的代码注入了 FilterRegistrationBean bean 还设置了 order 加载顺序。

解决后无果仍然和之前的效果一致。

/**
 * 跨域配置 C - Cross  O - Origin  R - Resource  S - Sharing
 *
 * @author purgeyao
 * @since 1.0
 */
@Configuration
//@Order(Ordered.HIGHEST_PRECEDENCE)
public class CorsConfig 

  @Bean
  public FilterRegistrationBean filterRegistrationBean() 
    final UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
    final CorsConfiguration config = new CorsConfiguration();

    config.setAllowCredentials(true);
    config.setAllowedOrigins(Arrays.asList("*"));
    config.setAllowedHeaders(Arrays.asList("*"));
    config.setAllowedMethods(Arrays.asList("*"));
    config.setMaxAge(300L);

    source.registerCorsConfiguration("/**", config);
    CorsFilter corsFilter = new CorsFilter(source);
    FilterRegistrationBean filterRegistrationBean = new FilterRegistrationBean(corsFilter);
    filterRegistrationBean.setOrder(0);
    return filterRegistrationBean;

在一些资料+源码的帮助下，尝试了下面代码：

这次实现了 CorsFilter 类加载了 @Order 顺序为 (Ordered.HIGHEST_PRECEDENCE) 最优先。

/**
 * 解决 zuul+oauth2 跨域配置 C - Cross  O - Origin  R - Resource  S - Sharing
 *
 * @author purgeyao
 * @since 1.0
 */
@Component
@Order(Ordered.HIGHEST_PRECEDENCE)
public class AjaxCorsFilter extends CorsFilter 

  public AjaxCorsFilter() 
    super(configurationSource());
  

  private static UrlBasedCorsConfigurationSource configurationSource() 
    CorsConfiguration corsConfig = new CorsConfiguration();
//        List<String> allowedHeaders = Arrays.asList("x-auth-token", "content-type", "X-Requested-With", "XMLHttpRequest");
    List<String> exposedHeaders = Arrays
        .asList("x-auth-token", "content-type", "X-Requested-With", "XMLHttpRequest");
//        List<String> allowedMethods = Arrays.asList("POST", "GET", "DELETE", "PUT", "OPTIONS");

    List<String> allowedHeaders = Arrays.asList("*");
    List<String> allowedMethods = Arrays.asList("*");
    List<String> allowedOrigins = Arrays.asList("*");
    corsConfig.setAllowedHeaders(allowedHeaders);
    corsConfig.setAllowedMethods(allowedMethods);
    corsConfig.setAllowedOrigins(allowedOrigins);
    corsConfig.setExposedHeaders(exposedHeaders);
    corsConfig.setMaxAge(36000L);
    corsConfig.setAllowCredentials(true);

    UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
    source.registerCorsConfiguration("/**", corsConfig);
    return source;

哈哈哈，解决了，但是有没有感觉到莫名其妙啊，经过了解

发现其实只是一个加载顺序的问题，我们上面注入的 FilterRegistrationBean 也可以使用的，只是在设置order的时候有点问题需要设置比 security 优先级高，改为 Ordered.HIGHEST_PRECEDENCE 发现成功可以通过跨域了。

/**
 * 跨域配置 C - Cross  O - Origin  R - Resource  S - Sharing
 *
 * @author purgeyao
 * @since 1.0
 */
@Configuration
//@Order(Ordered.HIGHEST_PRECEDENCE)
public class CorsConfig 

  @Bean
  public FilterRegistrationBean filterRegistrationBean() 
    final UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
    final CorsConfiguration config = new CorsConfiguration();

    config.setAllowCredentials(true);
    config.setAllowedOrigins(Arrays.asList("*"));
    config.setAllowedHeaders(Arrays.asList("*"));
    config.setAllowedMethods(Arrays.asList("*"));
    config.setMaxAge(300L);

    source.registerCorsConfiguration("/**", config);
    CorsFilter corsFilter = new CorsFilter(source);
    FilterRegistrationBean filterRegistrationBean = new FilterRegistrationBean(corsFilter);
    // 设置为 Ordered.HIGHEST_PRECEDENCE
    filterRegistrationBean.setOrder(Ordered.HIGHEST_PRECEDENCE);
    return filterRegistrationBean;

解决解决。。。

OPTIONS请求解决

有关 OPTIONS(NDN web docs) 介绍。

在发送 post 请求会发现在真正发送之前会有一个 OPTIONS 请求。

因 OPTIONS 为携带任何有状态的认证信息，被权限拦截下来异常，就没有之后的真正请求了。

我们只需要吧 OPTIONS 请求放开返回200状态即可。

有很多办法做到，可以在zuul网关放过，也可以通过 security 添加忽略拦截列表。

public class SecurityConfiguration extends WebSecurityConfigurerAdapter 

    ...
    
    @Override
    protected void configure(HttpSecurity http) throws Exception 
        ...
        // 添加忽略拦截OPTIONS 类型的请求
        http.authorizeRequests().antMatchers(HttpMethod.OPTIONS).permitAll();
        ...

技术图片

万事大吉。

总结

简单的bug解决起来简单点，不过遇到交集的bug，有心无力的感觉，莫名其妙的问题，需要耐心观察源码运行原理。

来源：站长（http://www.1994july.club/）

.netcore3.1webapi解决跨域问题getdeletepostput等(代码片段)

...置。但是依然阻挡不了DELETE,PUT 等方法出现的 CORS跨域问题。下面来说一下我是如何解决的：首先在start 查看详情

django-cors-headers解决跨域问题(代码片段)

Django-cors-headers解决django开发中遇到的跨域访问资源问题github地址:https://github.com/adamchainz/django-cors-headers首先安装Django-cors-headers扩展类#安装django-cors-headers解决跨域问题:pipinstalldjango-cors-headers添加应用INSTALLED_APP 查看详情

cors跨域解决方案(代码片段)

跨域问题出现的原因：1.域2.端口3.协议跨域一般是由AJAX请求引发的问题，http请求不受此影响。解决跨域问题较多的使用CORS方案，JSONP逐渐被淘汰，因为JSONP只支持GET请求。CORS解决跨域： <requestFiltering> &... 查看详情

webapi跨域问题解决方案：cors

...试工具的使用，这篇接着来看看WebAPI的另一个常见问题：跨域问题。本篇主要从实例的角度分享下CORS解决跨域问题一些细节。一、跨域问题的由来同源策略：出于安全考虑，浏览器会限制脚本中发起的跨站请求，浏览器要求JavaS 查看详情

跨域问题解决方案

一、跨域问题存在的原因二、跨域解决对比 JSONP对比CORS jsonp和cors都能解决Ajax直接请求普通文件存在跨域无权限访问的问题JSONP只能实现GET请求，而CORS支持所有类型的HTTP请求使用CORS，开发者可以使用普... 查看详情

springboot中通过cors解决跨域问题

...ol-Allow-Origin‘headerispresentontherequestedresource.后端使用CORS（跨域源资源共享）（CORS，Cross-originresourcesharing）实现跨域全局配置@Config 查看详情

cors跨域资源共享---解决前后端跨域问题

Cross-OriginResourceSharing(CORS)，定义了在跨域访问资源时浏览器和服务器之间如何通信。CORS背后的基本思想是使用自定义的HTTP头部允许浏览器和服务器相互了解对方，从而决定请求或响应成功与否。解决方法：①后端... 查看详情

webapi跨域问题解决方案：cors(代码片段)

.../p/5177176.html正文这篇接着来看看WebAPI的另一个常见问题：跨域问题。本篇主要从实例的角度分享下CORS解决跨域问题一些细节。一、跨域问题的由来同源策略：出于安全考虑，浏览器会限制脚本中发起的跨站请求，浏览器要求JavaS... 查看详情

如何用cors来解决js中跨域的问题

参考技术A1、CORS的原理：CORS定义一种跨域访问的机制，可以让AJAX实现跨域访问。CORS允许一个域上的网络应用向另一个域提交跨域AJAX请求。实现此功能非常简单，只需由服务器发送一个响应标头即可。2、tomcat如何配置cors的跨域... 查看详情

带有 Zuul 代理的 Spring Security Oauth2 SSO

...ingSecurityOauth2SSOwithZuulProxy【发布时间】：2016-07-0603:40:22【问题描述】：我正在从Springsexcellentsecuritytutorials修改oauth2-vanilla示例。oauth2-vanilla将Zuul代理和UI组合到一个应用程序中。我想将Zuul代理和UI分开。（Zuul代查看详情

后端cors解决跨域问题

一.为什么会有跨域问题　　是因为浏览器的同源策略是对ajax请求进行阻拦了,但是不是所有的请求都给做跨域,像是一般的href属性,a标签什么的都不拦截. 二.解决跨域的方法 &nb... 查看详情

springboot中通过cors解决跨域问题

今天和小伙伴们来聊一聊通过CORS解决跨域问题。同源策略很多人对跨域有一种误解，以为这是前端的事，和后端没关系，其实不是这样的，说到跨域，就不得不说说浏览器的同源策略。同源策略是由Netscape提出的一个著名的安全... 查看详情

跨域解决方案-跨域资源共享cors(代码片段)

目录1.cors介绍2.原理3.cors解决跨域4.自定义HTTP头部字段解决跨域5.代码演示5.参考链接1.cors介绍cors说的是一个机制，其实相当于一个http协议的约定，就是用一段http头部字段来开一扇后门；当跨域发生时，服务器本身收不到浏览器... 查看详情

解决跨域问题(cors)(代码片段)

一、改变响应头部　　请求代码如下：fetch("http://localhost:8888/young",method:"get").then(function(resp)resp.text().then(function(data)console.log(data);););　　服务器代码(设置响应头部)：　　浏览器访问如下：2、如果是用了Spring框架，可以使用更简... 查看详情

egg:解决跨域问题(代码片段)

前言： egg项目中使用egg-cors处理跨域问题实现步骤：1、安装cnpminstallegg-cors-S2、配置插件 config/plugin.js//跨域问题exports.cors=enable:true,package:'egg-cors'3、配置插件 config/config.default.jsconfig.co 查看详情

django解决跨域请求的问题(代码片段)

1.安装django-cors-headerspipinstalldjango-cors-headers2.配置settings.py文件INSTALLED_APPS=[...‘corsheaders‘，...]#添加中间件MIDDLEWARE=[‘django.middleware.security.SecurityMiddleware‘,#默认‘django.contrib.sessions.middleware.SessionMiddleware‘,#默认‘corsheaders.middlewa... 查看详情

cors和jsonp的区别，如何解决跨域问题？(代码片段)

...用cors和jsonp呢？实际上，cors和jsonp都是用于解决跨域问题，当两个页面的协议、域名、端口号中有一个不一致时就存在了跨域，一旦出现跨域，浏览器发送跨域请求后，请求回来的数据都会被浏览器所拦截... 查看详情

实战，springboot中如何解决cors跨域问题～（文末送书）

CORS（Cross-OriginResourceSharing）"跨域资源共享"，是一个W3C标准，它允许浏览器向跨域服务器发送Ajax请求，打破了Ajax只能访问本站内的资源限制。在前后分离的架构下，我们经常会遇到跨域CORS问题，... 查看详情