关于SpringBoot项目部署上线,出现只能访问到登录界面,跳转不成功的问题,的跨域问题

只能访问到登录界面,跳转不成功的问题

这个问题困扰了我一个多星期,始终无法解决,确定后端代码已经完全正确的情况下,检查了前端代码,最终发现问题在前端。
找到前端的 login.html 代码如下:

// An highlighted block
doLogin() {

					if (this.username == null || this.username == undefined || this.username == '') {
						alert("用户名不能为空");
						return;
					} else if (this.password == null || this.password == undefined || this.password == '') {
						alert("密码不能为空");
						return;
					} else if (this.password.length < 6) {
						alert("密码不能少于6位");
						return;
					}

					var userBO = {
						username: this.username,
						password: this.password
					};
					// console.log(userBO);

					var serverUrl = app.serverUrl;

					var returnUrl = this.returnUrl;
					// form提交
					axios.defaults.withCredentials = false;
					// console.log(axios.defaults);
					axios.post(serverUrl + '/passport/login', userBO)
						.then(res => {
							if (res.data.status == 200) {
								var user = res.data;
								console.log(user);

								window.location.href = app.ctx + "/index.html";
								if (returnUrl != null && returnUrl != undefined && returnUrl != '') {
									window.location.href = returnUrl;
								} else {
									window.location.href = "index.html";
								}

							} else if (res.data.status == 500) {
								alert(res.data.msg);
								return;
							}
						});
				}
			}

登录接口没有问题,存在问题的是跨域访问需要发送cookie时一定要加axios.defaults.withCredentials = true;
修改如下:

// An highlighted block
axios.defaults.withCredentials = true;

如此困扰好久的问题就解决了。

### 创建Spring Boot Vue MySQL全栈项目的步骤 #### 项目环境准备 为了顺利创建此类型的全栈项目,在Mac上需安装必要的工具和软件,包括但限于JDK、Node.js以及数据库管理工具等。对于本案例而言,重点在于设置好Java开发环境来支持Spring Boot的应用程序构建,并确保拥有最新版本的npm以便于Vue前部分的操作。 #### 后服务搭建-Spring Boot集成MySQL 通过Spring Initializr在线平台或者IDE插件可以便捷地初始化一个新的Spring Boot工程。选择合适的起步依赖项如`Spring Web`, `Spring Data JPA` 和 `MySQL Driver`以实现RESTful API的设计与关系型数据存储之间的交互功能[^1]。 ```java // application.properties 中配置MySQL连接信息 spring.datasource.url=jdbc:mysql://localhost:3306/yourdb?useSSL=false&serverTimezone=UTC spring.datasource.username=root spring.datasource.password=password ``` 接着定义实体类映射到数据库中的表格结构;编写Repository接口继承自`JpaRepository`完成基本CRUD操作封装;最后利用@Service组件注入业务逻辑层处理请求参数并通过@RestController暴露对外API接口[^2]。 #### 前页面设计-Vue CLI快速启动 借助Vue CLI命令行工具可迅速建立单页应用程序(SPA),执行如下指令: ```bash vue create frontend-app cd frontend-app npm run serve ``` 这将在本地开启一个热重载的服务实例供开发者实时预览修改后的UI效果。随后可根据实际需求引入Element UI或其他第三方库美化界面布局,同时调整路由规则匹配同视图间的跳转路径[^3]。 #### 统一前后通信机制 考虑到资源共享(CORS)的问题,可以在Spring Boot中全局允许特定源地址发起HTTP调用,或是采用JSONP方式绕过浏览器同源策略限制。另外建议使用Axios作为客户发起异步AJAX请求的最佳实践之一,它能更好地兼容Promise特性并提供简洁易懂的方法签名。 ```javascript import axios from 'axios'; export default { data() { return { books: [] } }, methods: { fetchBooks() { axios.get('/api/books') .then(response => this.books = response.data); } } } ``` #### 完整部署方案规划 当完成了上述各模块的功能测试之后,则要着手考虑整体架构上线事宜。一方面可以通过Docker容器化技术打包镜像文件发布至云服务器运行;另一方面也可以直接将静态资源上传至CDN加速网络分发速度,而后则托管在具备高可用性的主机环境中监听来自公网的入站流量。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值