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

我们在第五期完整了前端代码的重构，在第六期，使用 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 {
    @Override
    public 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，所以可直接删除~