同源禁止策略

同源策略是浏览器的一种安全策略，要求协议、域名、端口都相同才能互相访问

如果其中有一个不相同，浏览器会禁止页面加载或执行与自身不同域的脚本

这个策略有助于阻隔恶意文档，减少可能被攻击的媒介

前端：http://localhost:5173/

后端：http://localhost:8080/

我们发现，前后端端口不同，就会被浏览器当成不同的服务器，会触发同源禁止策略，从而浏览器无法直接向后端发送请求

代理请求

为了解决这个问题，我们可以直接让前端发送请求到后端，浏览器只需要读取数据，这种处理模式叫代理模式

但前端本身就会处理很多的业务，再让他自己去往后端发请求，会大大加重前端服务器的负载

预检请求

为了确认能够跨域，浏览器提前向后端发送一个预检请求，后端会响应一些告知客户端可以跨域的信息

预检请求之后，客户端再发送正式的请求

预检请求无需发送多次，只有在浏览器第一次请求后端时发送一次

跨域过滤器

为了解决这个问题，我们在后端建立跨域过滤器，如果是预检请求，响应允许跨域的信息

如果不是预检请求，就直接放行

跨域过滤器并不要求我们自己写，等学到MVC框架之后，直接一个注解即可搞定

尚硅谷给我们提供了一个跨域过滤器

import com.xiaobai.schedule.common.Result;
import com.xiaobai.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 CrosFilter 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);
        }
    }
}