Zuul关于跨域问题的解决方案之一

最新推荐文章于 2024-03-23 18:18:18 发布
原创 最新推荐文章于 2024-03-23 18:18:18 发布 · 4k 阅读 · 8 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了在前后分离的项目中，如何使用Zuul过滤器处理跨域问题。作者通过理解CORS的原理，分享了设置预请求OPTIONS和处理真实请求的步骤，以及在实现过程中遇到的选项请求未返回成功状态码的疑惑和解决方案。同时，提到了如果没有正确配置，浏览器会提示缺少'Access-Control-Allow-Origin'头部。

前后分离之zuul过滤器处理跨域

刚毕业的应届小白一枚
最近想要自己熟悉一下最近流行的web技术
打算用 spring cloud +vue3 +iview 搭建一个前后分离的项目玩玩
下面是项目地址：
https://github.com/quaint-ai/Vue-SpringCloud-CMS

有一个simple-v1.0 分支，是一个简单的项目结构demo，感兴趣的可以clone到本地尝试一下。有疑问欢迎留言，一起成长。

最近两天遇到了前端请求后端的跨域问题，传统的jsonp不能满足更多的请求方式，因此了解一下cors的方式跨域是必要的。

简要了解cors的跨域原理

个人摸索理解，如果需要改正，请指出。多谢。

为什么需要跨域
  1. 浏览器的同源策略来起到安全的作用。
  2. 需要同协议，同域名/IP，同端口才能直接请求。
  3. 这个协议的存在，我们无法正常跨域请求。

利用cors跨域会有以下过程。

  1. 跨域请求会先发送一个预请求OPTIONS
  2. 预请求成功后需要返回给前端一个成功的状态码
  3. 预请求通过，进行真正的请求，实现跨域

问题解决过程：

前端正常发送ajax/axios请求

import axios from "axios"
const webtest = 'http://localhost:80';
const axiosInstance = axios.create({
   
   
    headers: {
   
   'Content-Type': 'application/json;charset=utf-8'},// 设置传输内容的类型和编码
    withCredentials: true // 指定某个请求应该发送凭据。允许客户端携带跨域cookie，也需要此配置
  });
// 查询样例用户列表 用于测试
export const testUser = (params) => {
   
   
    return axiosInstance({
   
   
        url: webtest
最低0.47元/天 解锁文章
Spring Cloud (6) | spring cloud zuul 跨域问题No 'Access-Control-Allow-Origin' header
AI时代光年
11-30 9030
在用spring cloud zuul做Filter的时候，访问微服务出现跨域问题，在网上找了很多办法：zuul: ignored-headers: Access-Control-Allow-Credentials, Access-Control-Allow-Origin参照：https://github.com/spring-cloud/spring-cloud-netflix/issues/
SpringCloud zuul Cookie跨域丢失问题
徐冉的博客
09-22 2455
什么是跨域： 协议、端口号、域名 都相同才是同一个域 只要有一个不同就算是跨域 主域名相同，子域名不同也算跨域 email.qq.com和zone.qq.com就属于主域相同，子域不同，也算是跨域 需要注意的是：协议不同（eg:https和http）或者端口号不同造成的跨域，前端是无法解决的   1.我所遇到的跨域问题说明：端口号不同。 2.由于我们做的项目采用的是SpringClo...
zuul+security跨域Cors问题解决
AzulSystems的博客
03-03 230
场景在服务后台都会出现跨域cors问题，不过一般spring解决起来比较方便，在框架+框架的基础上，问题就显得特别明显了，各种冲突，不了解源码的运行原理，解决起来也是有心无力。这里介绍的是zuul配置了跨域，在前端调用仍然会出现跨域的问题。一般没有权限的接口加上cors配置就会通过跨域的问题。不过在服务间调用具有权限的功能，莫名的报跨域问题。post特殊请求在解决问题时发现 post 请求也有点特殊，这里也需要处理一下。post请求分为简单请求和复杂请求。
springcloud+zuul处理跨域请求
NeverSayCode的博客
05-31 2095
一、主要是通过过滤器来实现 在zuul下新建一个FirstFilter 继承ZuulFilter package com.beilu.apigateway.filter; import com.netflix.zuul.ZuulFilter; import com.netflix.zuul.context.RequestContext; import com.netflix.zuul.excep...
解决zuul网关跨域问题
热门推荐
不积跬步，无以至千里，不积小流，无以成江海
06-24 1万+
问题发现 正常情况下，跨域是这样的： 1. 微服务配置跨域+zuul不配置=有跨域问题 2. 微服务配置+zuul配置=有跨域问题 3. 微服务不配置+zuul不配置=有跨域问题 4. 微服务不配置+zuul配置=ok 然而云环境中每个服务自己有跨域解决方案，而网关需要做最外层的跨域解决方案.如果服务已有跨域配置网关也有，会出现*多次配置问题。 Access-Control-Allo...
在Zuul网关解决跨域问题
weixin_44257023的博客
12-02 4724
在Zuul服务中做如下操作 添加config 包,并创建CORS跨域配置类代码如下(有硬编码): import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; import org.springframework.web.cors.CorsConfiguration; import org.springframework.web.cors.Url
spring cloud如何修复zuul跨域配置异常的问题
08-29
然而，在实际开发过程中，我们可能会遇到Zuul跨域配置异常的问题，导致前端与后端通信受阻。本文将详细介绍如何解决Spring Cloud Zuul在配置跨域时出现的异常。 首先，我们需要理解跨域（CORS）的基本概念。跨域是...
Zuul解决跨域问题
weixin_44841849的博客
04-18 623
可以用注解：在controller的方法上加@CrossOrgin() 这里用的是写一个@Configuration package van.gateway.config; import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration;...
Zuul 跨域问题
月光秦城
05-08 1174
在springboot里，要实现跨域，需要在被调用的类或者方法上增加@CrossOrigin注解(局部设置，针对某个方法)。但是在spring cloud里，要在粒度那么小的去控制跨域，那也太繁琐了，一般我们在zuul路由里设置(全局设置)，有两种方式，一种是通过增加CorsFilter过滤器，一种是通过继承ZuulFilter 1、在zuul里增加CorsFilter过滤器 @Configu...
SpringCloud——路由网关Zuul（包括过滤器功能）+Gateway网关（解决跨域）
usa_washington的博客
06-19 1359
网关Zuul
Zuul：跨域
Leon_Jinhai_Sun的博客
09-08 646
前端是通过ajax发送请求,浏览器的ajax,是有同源策略的,如果违反了同源策略,就会产生跨域问题, Zuul作为微服务的网关,在他上面处理跨域,也是一种选择,Zuul的跨域其实可以看成是Spring的跨域, Spring的跨域常用的一种方法,是在服务被调用的类或者方法上,增加@CrossOrgin注解,来声明自己支持 跨域访问,这种方式的缺点其实挺明显的,他的作用域是在类或者方法上,你看...
网关 Spring Cloud Zuul 跨域问题，java五年经验面试题
m0_62289824的博客
03-23 845
/这个请求头在https中会出现,但是有点问题，下面我会说//越小越排前面自定义跨域ZuulFilter因为第一种方式在https下失败后，我尝试了用zuulfilter实现cors的方式一共需要两个filiter：一个pre, 一个postPre-Filter 用来处理预处理OPTIONS请求，当发现是OPTIONS请求的时候，给出跨域响应头，并且不对其进行zuul路由，直接返回成功（200）, 给前端服务允许跨域@Component@Override/*
zuul的跨域问题及解决
angel_jobs的博客
05-28 2916
前言：涉及到跨域问题，我们首先想到的是在贝雕用的类或方法上增加@CrossOrign注解，这节我们主要讲解在zuul里增加CorsFilter过滤器。 在api-gateway服务中新建一个CorsConfig类，代码如下 import org.springframework.context.annotation.Bean; import org.springframework.context.a...
记录网关zuul处理跨域/XSS问题
C18298182575的博客
04-14 903
这种过滤器用于构建发送给微服务的请求，并使用Apache HttpClient或Netfilx Ribbon请求微服务。zuul把Request route到 用户处理逻辑 的过程中，这些filter参与一些过滤处理，比如Authentication，Load Shedding等。那么与网关处理跨域问题关系是什么，NG处理了，为什么还需要在网关中处理。Zuul中定义了四种标准过滤器类型，这些过滤器类型对应于请求的典型生命周期。1.PRE，前置需要处理的逻辑，跨域/XSS处理。zuul的核心是一系列的。
微服务学习15——Zuul的跨域解决方案
苏云南雁的博客
04-28 559
一般spring boot对跨域的解决方案是在类或者方法上加@CrossOrigin注解 对于单个节点，要实现跨域，通过这个注解： @CrossOrigin(allowCredentials = "true") 而zuul提供了一种新的解决方案，通过增加CrossFilter过滤器，代码如下： // Cors: C - cross O - Origin R - Resource...
zuul跨域
qq_34745957的博客
03-16 353
zuul跨域问题解决方案： 1.在被调用的类或方法上添加@CrossOrigin注解（不建议，在需要跨域的多个接口上分别定义，比较麻烦） 2.在zuul里添加CorsFilter过滤器（对多接口跨域统一设置） ...
SpringCloud zuul网关常见问题解决办法
VincentGTX_huang的博客
08-22 3347
前言:今天整理一下以往的SpringCloud遇到一些常见的问题，顺手做一些笔记，记录一下自己遇到过的坑。 问题1：各服务之间请求的时候由于处于不同服务器或者不同ip的项目下，出现的跨域问题 问题2：各服务之间传递各种参数，但是通过request.setHeader传递参数，如token无法传递到下一个服务里的问题 或者其他参数想近一步传递，但是到了网关这一步缺丢...
spring cloud-----zuul跨域解决方案
编码爱好者
03-08 702
分两步 一、在zuul的配置文件中加入以下代码 zuul: sensitiveHeaders: Cookie,Set-Cookie ignored-headers: Access-Control-Allow-Credentials, Access-Control-Allow-Origin, Access-Control-Allow-Methods 二、在zuul加入跨域过滤器 packa...
网关 跨域问题
最新发布
11-21
网关跨域问题可以通过以下几种方法解决： #### 网关统一配置允许跨域 在 Spring Cloud 中，可以通过配置 `CorsWebFilter` 来统一允许跨域请求。以下是示例代码： ```java import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; import org.springframework.web.cors.CorsConfiguration; import org.springframework.web.cors.UrlBasedCorsConfigurationSource; import org.springframework.web.filter.CorsFilter; import org.springframework.web.reactive.filter.CorsWebFilter; @Configuration public class GulimallCorsConfiguration { @Bean public CorsWebFilter corsWebFilter(){ UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource(); CorsConfiguration corsConfiguration = new CorsConfiguration(); // 允许所有头进行跨域 corsConfiguration.addAllowedHeader("*"); // 允许所有请求方式进行跨域 corsConfiguration.addAllowedMethod("*"); // 允许所有请求来源进行跨域 corsConfiguration.addAllowedOrigin("*"); // 允许携带cookie进行跨域 corsConfiguration.setAllowCredentials(true); // 任意路径都允许上述配置的跨域 source.registerCorsConfiguration("/**", corsConfiguration); return new CorsWebFilter(source); } } ``` 这种配置会允许所有路径的请求进行跨域，并且支持所有的请求头、请求方法和来源，同时允许携带 Cookie 进行跨域请求[^1]。 #### 无网关时的跨域设置 若没有使用网关，可以在 Spring Boot 应用中配置 `CorsFilter` 来解决跨域问题。示例代码如下： ```java import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; import org.springframework.context.annotation.Bean; import org.springframework.web.cors.CorsConfiguration; import org.springframework.web.cors.UrlBasedCorsConfigurationSource; import org.springframework.web.filter.CorsFilter; @SpringBootApplication public class VueApplication { public static void main(String[] args) { SpringApplication.run(VueApplication.class, args); } private CorsConfiguration buildConfig() { CorsConfiguration corsConfiguration = new CorsConfiguration(); corsConfiguration.addAllowedHeader("*"); corsConfiguration.addAllowedOrigin("*"); corsConfiguration.addAllowedMethod("*"); corsConfiguration.setAllowCredentials(true); return corsConfiguration; } @Bean public CorsFilter corsFilter() { System.out.println("=============== 设置跨域过滤器 ================"); UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource(); source.registerCorsConfiguration("/**", buildConfig()); return new CorsFilter(source); } } ``` 此配置会为应用添加一个跨域过滤器，允许所有路径的请求进行跨域，支持所有请求头、请求方法和来源，同时允许携带 Cookie 进行跨域请求[^2]。 #### Zuul 网关跨域配置 对于 Zuul 网关，需要注意跨域配置的组合。通常情况下，微服务不配置跨域，仅在 Zuul 网关配置跨域可以解决问题。例如，在 Zuul 网关的配置文件中添加跨域相关的配置，确保网关能够正确处理跨域请求[^3]。 ###
评论 2
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值