当前位置：首页 > news >正文

案例开发 - 日程管理 - 第六期

news 2025/9/10 6:35:25

我们在第五期完整了前端代码的重构，在第六期，使用 Axios 的技术完成前后端数据交互。

在之前的 demo-schedule 文件夹中，先下载 axios 依赖 --> npm install axios

创建 src/utils/request.js 文件

import axios from 'axios'// 创建 instance 实例
const instance = axios.create({baseURL:'http://localhost:8080/'
})// 添加请求拦截
instance.interceptors.request.use(//设置请求头配置信息config => {// 处理指定的请求头return config},// 设置请求错误处理函数error => {return Promise.reject(error)}
)// 添加响应拦截器
instance.interceptors.response.use(// 设置响应正确时的处理函数response => {return response},// 设置响应异常时的处理函数error => {return Promise.reject(error)}
)// 默认导出
export default instance

然后在 regist.vue 中进行操作

此时再打开 idea 启动后端服务器，在前端的注册页面，对用户名进行登录时，会发现控制台有如下报错：

我们称这种错误为：浏览器同源禁止错误。

即，我们的浏览器，访问的是前端页面的地址，http://localhost:5173，但是却从后端地址 http://localhost:8080 给我们返回数据，浏览器认为这样地址发生了变化而得到的数据是不安全的，因此报错。

解决：

1. 代理模式：我们浏览器找到前端服务器后，让前端服务器去找后端服务器来获得数据，然后再由前端服务器将数据给我们返回，整个过程中，我们并不知道后端服务器的存在

2. 预检模式：

浏览器知道了后端服务器的存在，向后端服务器发两次请求，第一次称为预检，即确定一下后端服务器的数据是否安全，后端服务器告诉浏览器，放心吧哥们，我没病，然后浏览器再向后端服务器发送请求获取数据。

在这个过程中，后端服务器中就需要设置一个跨域过滤器，判断是不是预检请求，如果是，则响应允许跨域的信息，请求到此为止。如果不是，则放行。

因前端页面已经接收数量较多的请求，所以本次不使用代理模式解决问题。

跨域过滤器代码，我们在后端的项目中的 filter 文件夹中创建 CrossFilter 文件

代码如下：

package com.zzz.schedule.filter;/** @author zzr* @date: 2025/09/09  09:33* @description: 跨域过滤器*/import com.zzz.schedule.common.Result;
import com.zzz.schedule.util.WebUtil;
import jakarta.servlet.*;
import jakarta.servlet.annotation.WebFilter;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import java.io.IOException;@WebFilter("/*")
public class CrossFilter implements Filter {@Overridepublic void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {HttpServletRequest request = (HttpServletRequest) servletRequest;System.out.println(request.getMethod());HttpServletResponse response = (HttpServletResponse) servletResponse;response.setHeader("Access-Control-Allow-Origin", "*");response.setHeader("Access-Control-Allow-Methods", "POST, GET, PUT, OPTIONS, DELETE, HEAD");response.setHeader("Access-Control-Max-Age", "3600");response.setHeader("Access-Control-Allow-Headers", "access-control-allow-origin, authority, content-type, version-info, X-Requested-With");// 如果是跨域预检请求，则直接在此响应200业务码if(request.getMethod().equalsIgnoreCase("OPTIONS")){WebUtil.writeJson(response, Result.ok(null));}else{// 非预检请求，放行即可filterChain.doFilter(servletRequest, servletResponse);}}
}

未来我们使用框架，直接用一个 @CrossOrigin 就可以解决跨域问题了

注意，我们配置完上面的跨域过滤器后，还需要对之前 LoginFilter 过滤器进行删除

因为我们这里不再使用 cookie 和 session 方式记录用户状态了，未来使用 token，所以可直接删除~