java后端使用cors方法解决跨域问题

最新推荐文章于 2025-05-29 14:51:04 发布

爱喝咖啡的蟒蛇

最新推荐文章于 2025-05-29 14:51:04 发布

阅读量4.2k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： springboot 跨域 mp 文章标签： java 开发语言 spring

本文链接：https://blog.youkuaiyun.com/masterYu123/article/details/123336834

springboot 同时被 3 个专栏收录

1 篇文章

订阅专栏

跨域

1 篇文章

订阅专栏

1 篇文章

订阅专栏

本文通过创建一个配置类实现SpringBoot应用的跨域设置，允许来自'http://localhost:8081'的请求，并展示了如何使用jQuery进行Ajax数据提交，成功将数据添加到后台数据库。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

关于跨域的问题，之前一直被卡在了访问不存在上，今天无意之间翻到了一位大神的笔记，瞬间犹如醍醐灌顶一般，找到了其中的问题。

1.新建一个包，然后在包下新建一个类 (包名和类名根据自己喜欢命名)

MyCors.java

@Configuration
public class MyCors {

    @Bean
    public CorsFilter corsFilter(){
//        添加cors配置信息
        CorsConfiguration config = new CorsConfiguration();
//        允许接收的域 ，不要写*，否则cookie无法使用
        config.addAllowedOrigin("http://localhost:8081");
//        是否发送cookie消息
        config.setAllowCredentials(true);
//        运行的请求方式
        config.addAllowedMethod("OPTIONS");
        config.addAllowedMethod("HEAD");
        config.addAllowedMethod("GET");
        config.addAllowedMethod("PUT");
        config.addAllowedMethod("POST");
        config.addAllowedMethod("DELETE");
        config.addAllowedMethod("PATCH");
//        运行的请求头消息
        config.addAllowedHeader("*");
//        添加映射路径，拦截一切请求
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**",config);
        return new CorsFilter(source);
    }
}

2.在resources下的static中新增index.html,并且加入jquery.js

index.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>ss</title>
    <script src="jquery-3.6.0.js"></script>
</head>
<body>
<input type="button" value="add" onclick="addStu()"><br>
<input type="button" value="delete" onclick="deleteStu()"><br>

<script>
    function addStu(){
        $.ajax({
            type:'post',
            url:'http://localhost:8080/stu',
            data:JSON.stringify({
                "name":"master",
                "age":"23",
                "salary":"5000.00"
            }),
            dataType:"json",
            contentType:"application/json;charset=UTF-8",
            success:function (msg){}
        })
    }
</script>
</body>
</html>