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

本文通过创建一个配置类实现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>

 3.测试一手

在controller层中新建类,然后写个添加方法

 运行之后,如图所示

状态码显示:200,说明成功了

在数据库看一下

 数据库被添加了数据 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值