Springboot处理跨域请求

文章目录

概要

跨域请求(Cross-Origin Requests)指的是在一个网页中加载的资源来自与当前网页不同的域、协议或端口。浏览器出于安全考虑,默认会限制这些跨域请求,这种限制称为同源策略(Same-Origin Policy)。

同源策略

同源策略要求一个网页只能与其源相同的资源进行交互,即:

  1. 域名相同
  2. 协议相同(如 HTTP 和 HTTPS)
  3. 端口相同

注意:只要域名 端口 协议一个不同就跨域了

跨域问题复现

前端:

html 复制代码
<template>
    <div>
        <button @click="getData">点击发送get请求</button>
        <h1>{{ data }}</h1>
    </div>
</template>

<script setup lang="ts" name="Child">
import http from "axios";
import { ref } from 'vue'
let baseUrl = "http://localhost:8899/api"
let data = ref("")
function getData() {
    http.get(baseUrl + "/get").then(response => {
        data.value = response.data;
    }).catch(error => {
        console.log(error);
    })
}
</script>

后端:

java 复制代码
@RestController
@RequestMapping(value = "/api")
public class TestController {
    @GetMapping(value = "/get")
    public String get() {
        return "get method";
    }
}

解决跨域

方法1

类或方法上添加@CrossOrigin(value="http://localhost:5173/")

应用级别:将 @CrossOrigin 注解放在类级别,意味着该类中的所有端点都允许来自指定来源的跨域请求。
方法级别:可以将 @CrossOrigin 注解放在特定方法上,以便仅允许某些特定方法的跨域请求。

java 复制代码
@RestController
@RequestMapping(value = "/api")
@CrossOrigin(value="http://localhost:5173/")
public class TestController {
    @GetMapping(value = "/get")
    public String get() {
        return "get method";
    }

要是每一个类都写挺麻烦的。

方法2

写一个配置类放入容器

java 复制代码
@Configuration
public class CrossConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**") //指定允许跨域请求的路径模式
                .allowedOrigins("http://localhost:5173/")
                .allowedMethods("GET", "POST", "PUT", "DELETE")
                .allowedHeaders("*")
                .allowCredentials(true); //指示是否允许发送凭据(如 Cookies、Authorization 头等)
    }
}

方法3

过滤器

java 复制代码
@Component
public class CorsFilter implements Filter {
    @Override
    public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)
            throws IOException, ServletException {
        HttpServletResponse res = (HttpServletResponse) response;
        HttpServletRequest req = (HttpServletRequest) request;

        res.setHeader("Access-Control-Allow-Origin", "http://localhost:5173");
        res.setHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");
        res.setHeader("Access-Control-Allow-Headers", "Origin, Content-Type, Accept, Authorization");
        res.setHeader("Access-Control-Allow-Credentials", "true");

        // OPTIONS 预检请求,服务器会返回 200 状态码
        if ("OPTIONS".equalsIgnoreCase(req.getMethod())) {
            res.setStatus(HttpServletResponse.SC_OK);
            return;
        }

        chain.doFilter(request, response);
    }
}

jwt拦截器验证token

可能会遇到jwt验证token失败

可以加上预检请求

java 复制代码
if ("OPTIONS".equalsIgnoreCase(request.getMethod())) {
     return true;
}
java 复制代码
@Component
public class InterceptorHandleConfig implements HandlerInterceptor {
    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) {
        if ("OPTIONS".equalsIgnoreCase(request.getMethod())) {
            return true;
        }
        String token = request.getHeader("Authorization");

        if (token == null) {
            response.setStatus(401);
            return false;
        }
        boolean verify = JWTUtil.verify(token, "123456".getBytes());
        if (!verify) {
            response.setStatus(401);
            return false;
        }
        return true;
    }
}

当然可以直接使用filter

Filter 是属于 Servlet 规范的一部分,用于对请求和响应进行底层处理,而 Interceptor 是 Spring 框架提供的用于增强 Controller 功能的机制。Filter 的执行优先于 Interceptor

防止请求存在缓存

防止请求存在缓存的策略对于保证数据的实时性和避免旧数据的获取非常重要。

解决方法,请求参数加一个时间戳,当然其他方法自己百度啦

js 复制代码
function getData() {
    http.get(baseUrl + "/get?timestamp=" + new Date().getTime(), {
        headers: {
            'Authorization': token
        }
    }).then(response => {
        data.value = response.data;
    }).catch(error => {
        console.log(error);
    })
}
相关推荐
一只叫煤球的猫11 小时前
写代码很6,面试秒变菜鸟?不卖课,面试官视角走心探讨
前端·后端·面试
bobz96511 小时前
tcp/ip 中的多路复用
后端
bobz96512 小时前
tls ingress 简单记录
后端
皮皮林55113 小时前
IDEA 源码阅读利器,你居然还不会?
java·intellij idea
你的人类朋友13 小时前
什么是OpenSSL
后端·安全·程序员
bobz96513 小时前
mcp 直接操作浏览器
后端
前端小张同学15 小时前
服务器部署 gitlab 占用空间太大怎么办,优化思路。
后端
databook15 小时前
Manim实现闪光轨迹特效
后端·python·动效
武子康16 小时前
大数据-98 Spark 从 DStream 到 Structured Streaming:Spark 实时计算的演进
大数据·后端·spark
该用户已不存在16 小时前
6个值得收藏的.NET ORM 框架
前端·后端·.net