vue+springcloud出现跨域问题

最新推荐文章于 2025-03-06 14:11:35 发布

原创

最新推荐文章于 2025-03-06 14:11:35 发布 · 798 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#java

当Vue前端与SpringCloud后端端口不一致时，会出现跨域问题，导致前端无法正常展示数据。表现为直接访问请求路径能获取数据，但前端报错。解决方法是在后端启动类中配置相应的跨域解决方案。

有的时候后端端口和前端端口不一致会导致跨域请求无法解析数据

表现直接输入请求路径可以获取数据，但是前端页面未展示
直接输入路径
在这里插入图片描述

前端报的错报跨域错误
可以通过在后端启动类中添加配置类解决跨域问题

/**
	 * 配置跨域访问的过滤器
	 */
	@Bean
	public FilterRegistrationBean registerFilter(){
   
   
		// 注册CORS过滤器
		UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Akashic_ether

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

Spring Cloud (6) | spring cloud zuul 跨域问题No 'Access-Control-Allow-Origin' header

AI时代光年

11-30

9055

在用spring cloud zuul做Filter的时候，访问微服务出现跨域问题，在网上找了很多办法：zuul: ignored-headers: Access-Control-Allow-Credentials, Access-Control-Allow-Origin参照：https://github.com/spring-cloud/spring-cloud-netflix/issues/

参与评论您还未登录，请先登录后发表或查看评论

基于SpringBoot+SpringCloud+Vue前后端分离项目实战 --开篇

热门推荐

天罡gg的专栏

03-07

2万+

如何高效学习Java? 毕业设计项目应该怎么做？入门实战项目应该怎么做？做Java开发都应该学习哪些框架技术？我想来跟你聊聊为什么要学习此专栏？我们经常说，看一个事儿千万不要直接陷入细节里，你应该先鸟瞰其全貌，这样能够帮助你从高维度理解问题。同样，当你迷茫想努力没有方向时，最事半功倍的方法是：找人带你! 因为过来人，更懂得如何学、如何做、如何少走弯路！那今天就给大家带来一门专栏课程，由天罡gg 和经海路大白狗两位实力大牛合力打造的一款专栏，可以让你从0到1快速拥有企业级规范的项目实战经验！

SpringCloud跨域详解

clownAdam的博客

03-06

1693

在单个Spring Boot服务中配置CORS。在Spring Cloud Gateway或Zuul网关中统一配置CORS。使用Nginx反向代理处理跨域。根据实际场景选择合适的解决方案，确保跨域请求的安全性和灵活性。

前端VUE+springcloud+gateway怎样解决跨域问题？

一往无前的博客

01-15

5666

1、如果是springboot的项目，则可以直接在Controller类上添加一个注解，或者添加一个配置类允许跨域请求访问。配置类如下： ```java import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; import or...

SpringCloud之解决在Vue-cli3.0中Vue-resources和axios的跨域访问问题

一叶知秋hwb的博客

04-14

683

1.1、配置cors配置信息，如果使用的是zuul网关路由，需要在zuul网关路由配置cors配置信息 package com.bean.springcloudzuul.config; import org.springframework.context.annotation.Configuration; import org.springframework.web.servlet.con...

Spring-Cloud GateWay+Vue 跨域方案汇总

鹏鹏2077

09-12

1548

在开发Spring Cloud和Vue的项目时，涉及到前后端分离的情况下，跨域成为一个常见的问题。本文将介绍跨域问题的背景，并提供了一些解决方案。跨域（Cross-Origin Resource Sharing，CORS）是一种浏览器的安全机制，用于限制从一个源（域、协议或端口）加载的Web页面上的资源如何与来自其他源的资源进行交互。当一个 Web 应用程序尝试从一个源加载来自不同源的资源时，浏览器将执行跨域检查。跨域限制的目的是保护用户隐私和安全，防止恶意网站通过跨域请求来获取用户的敏感信息。

java / spring boot /spring cloud /前后端分离/vue 跨域处理

weixin_38032826的博客

07-07

313

前后端分离避免不了跨域，在java流行的spring 框架下处理跨域，比较简单的是直接修改java的配置，使我们的应用支持跨域。方法1：在controller类上添加注解@CrossOrigin 即可，这个注解其实是CORS的实现。方法2：spring cloud一般会有网关，在网关中增加配置类如下，网关就会支持跨域。 package com.css.cloud.gateway.config; import org.springframework.cloud.client.discovery.Dis

踩坑记录（八）搭建SpringCloud项目时，使用vue把存在本地的token发送到后端，经过gateway网关出现的跨域问题

weixin_43145539的博客

08-13

806

下学期就要大四了，本人现在在南通实训，本来学校是打算去中山的，但是中山出现了疫情，所以我们就去了南通，我们知道南通在江苏，现在江苏也爆发了疫情。。。本来疫情没有爆发的时候，我们是在教室上课的，现在疫情爆发了，就在寝室里面上网课。。没错，我们现在就在寝室上网课，教ssm什么的，我也没怎么听，我就想那就趁着这段时间把毕业设计做完，早点答辩完，早点去实习。我的毕业设计是自己拟题的，就打算把之前自己做的论坛拆分成微服务，然后用上最近学的一些东西，比如设计模式，mongodb什么的，然后我在验证token.

解决Spring+Vue的跨域问题

ning的博客

01-17

1272

通过在Vue项目中配置代理和在SpringBoot项目中配置全局跨域策略，我们可以有效地解决Spring+Vue项目中的跨域问题。前端通过代理将请求转发到后端，后端通过全局配置允许特定域名的请求，从而实现前后端的顺利通信。希望本文的介绍能帮助你在开发过程中顺利解决跨域问题。版权声明：本博客内容为原创，转载请保留原文链接及作者信息。参考文章SpringBoot与Vue交互解决跨域问题【亲测已解决】SpringBoot+Vue：一站式解决跨域问题。

朝雨忆轻尘

06-05

8175

SpringCloud Gateway跨域配置代码实例

08-25

主要介绍了SpringCloud Gateway跨域配置代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

SpringCloud项目中解决跨域问题

weixin_45799076的博客

12-30

1908

SpringCloud项目中解决跨域问题一. 跨域, 浏览器对于javascript的同源策略的限制。 1. 以下情况都属于跨域域名不同 : www.tmall.com 与 www.taobao.com 域名相同，端口不同 : www.tmall.com:8080 与 www.taobao.com:8081 二级域名不同 : item.jd.com 与 miaosha.jd.com 2...

SpringCloud微服务解决网关跨域问题

snkkka163的博客

05-20

1640

SpringCloud微服务解决网关跨域问题写这篇文章之前我遇到了一个难以解决的CORS跨域问题如图: 我也试了各种方式，比如网上常见的在Controller、接口上贴注解啊什么的下面先列一下在此之前我尝试过的方式: 1.在方法参数加HttpRsponseServlet: response.setHeader("Access-Control-Allow-Origin", "*"); 2.在Controller或接口上贴@CrossOrigin注解 @CrossOrigin // 我还

Spring Cloud 前后端分离后引起的跨域访问解决方案

weixin_30367543的博客

12-08

202

背景 Spring Cloud 微服务试点改造，目前在尝试前后端分离。前台A应用（本机8080端口），通过网管（本机8769端口）调用后台应用B（本机8082端口）、应用C发布的http服务。。 A的js代码如下： $.ajax({ type: "POST", async: "true", url: "...

VUE+SpringCloud 跨域+Session管理解决办法

大帅的博客

06-01

4647

近期在做一个商城时，采用前后端分离开发，前端用vue，后台用SpringCloud微服务。业务流程为，商城前端通过跨域请求微服务网关（Zuul集群），由网关路由到各个微服务节点。遇到的问题：1.请求跨域，2.Session 需要共享，问题大家都知道，不多讲，直接上解决办法。解决办法：一.前端：前端都采用POST方法请求后台，在main.js中增加一个拦截器Vue.http....

SpringCloudGateway+Vue前后端联调解决跨域问题

qq_25578995的博客

01-02

1431

vue+微服务网关解决跨域问题，进行前后端联调

SpringCloud微服务项目实战Vue版

06-14

适用人群Java开发人员, Vue开发人员, 前后端分离开发人员, 权限管理和配置开发人员，微服务SpringCloud版本开发人员课程概述微服务SpringCloud前后端分离Vue企业项目实战，微服务脚手架，具有统一授权、认证后台管理系统；SpringCloud+Nacos+ SpringBoot+OAuth2+Jwt+Swagger等，核心技术采用Nacos、Fegin、Ribbon、Gateway、Hystrix、JWT Token、Mybatis、SpringBoot、Redis等主要框架和中间件。详细如下：

解决SpringBoot和前端Vue的跨域问题

不愧是暮言的博客

02-11

4466

要了解什么是跨域，我们先说一下同源的概念。同源，是指协议、域名、端口都相同。例如：http://192.168.0.1:8080与https://192.168.3.1:8080不是同源，因为协议不同，第一个冒号前面的为协议，中间的为域名，第二个冒号后面的为端口，只要满足有一处不同，则就不是同源。所谓跨域就是从 A 向 B 发请求，如若他们的地址协议、域名、端口都不相同，直接访问就会造成跨域问题，跨域是非常常见的现象！请求是跨域的但并不一定会报错，普通的图片请求。css文件请求是不会报错的。

springcloud+vue 前后端分离

08-04

2932

springcloud-hichat（前后端分离）一个简单的移动web聊天室，做这个小项目主要是想体验当今时代的一些新潮的技术，尤其是springcloud和vue，所以里面用到的东西是挺多的。该项目分为：用户移动web端和后台web管理系统码云地址: https://...

项目基于springcloud+vue＋nacos