在本地前端向后端发送请求,后端接收不到跨域问题

JAY.LIN 收录于未分类

2024-11-05 约 451 字预计阅读 1 分钟

https://bing.ee123.net/img/rand?artid=143502260

在本地前端向后端发送请求,后端接收不到(跨域问题)

一、问题:本地前后端分离工程,前端向后端发送请求后端接收不到请求,前端返回403报错

二、问题重现：

后端代码：

使用postman调用接口：

没有问题。

前端部分重要代码：

使用前端调试：

地址填写没有问题报403错误

原因：后端拒绝该请求，此项目后端使用的是Springboot框架开发前后端发生跨域问题

三、解决方法

添加Spring的拦截器或者是过滤器，我使用的是拦截器

1.首先创建拦截器对象：

import org.springframework.stereotype.Component;
import org.springframework.web.servlet.HandlerInterceptor;
import org.springframework.web.servlet.ModelAndView;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@Component//交给 Spring 管理
public class CORSInterceptor implements HandlerInterceptor {

    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
        // 设置响应头
        response.setHeader("Access-Control-Allow-Origin", "*"); // 允许所有来源
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, PUT, OPTIONS, DELETE"); // 允许的HTTP方法
        response.setHeader("Access-Control-Max-Age", "3600"); // 预检请求的有效期
        response.setHeader("Access-Control-Allow-Headers", "Content-Type, Authorization"); // 允许的请求头

        // 如果是预检请求，则直接返回状态码200
        if ("OPTIONS".equalsIgnoreCase(request.getMethod())) {
            response.setStatus(HttpServletResponse.SC_OK);
            return false; // 不继续处理请求
        } else {
            return true; // 继续处理请求
        }
    }

    @Override
    public void postHandle(HttpServletRequest request, HttpServletResponse response, Object handler, ModelAndView modelAndView) throws Exception {
        // 可选的后处理逻辑
    }

    @Override
    public void afterCompletion(HttpServletRequest request, HttpServletResponse response, Object handler, Exception ex) throws Exception {
        // 可选的完成处理逻辑
    }

}

2.添加拦截器

import com.fyp.health.interceptor.CORSInterceptor;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.InterceptorRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

import javax.annotation.Resource;

@Configuration
public class WebConfiguration implements WebMvcConfigurer {
@Resource
private CORSInterceptor corsInterceptor;
@Override
public void addInterceptors(InterceptorRegistry registry) {
registry.addInterceptor(corsInterceptor).addPathPatterns("/**");
}
}

运行:

目录

在本地前端向后端发送请求,后端接收不到跨域问题

在本地前端向后端发送请求,后端接收不到(跨域问题)