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

1 篇文章 0 订阅
1 篇文章 0 订阅

前言

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

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,说明成功了

在数据库看一下

 数据库被添加了数据 

 

JavaJavaScript中使用CORS(跨域资源共享)解决跨域问题的步骤如下: 1. 在Java后端设置CORS支持:在处理跨域请求的Java代码中,需要设置响应头以启用CORS。可以通过在响应对象中设置以下响应头字段来实现: ```java response.setHeader("Access-Control-Allow-Origin", "http://example.com"); // 允许特定的源访问 response.setHeader("Access-Control-Allow-Methods", "GET, POST, OPTIONS"); // 允许的HTTP方法 response.setHeader("Access-Control-Allow-Headers", "Content-Type"); // 允许的请求头 response.setHeader("Access-Control-Allow-Credentials", "true"); // 是否允许发送Cookie response.setHeader("Access-Control-Max-Age", "3600"); // 预检请求的有效期 ``` 2. 在JavaScript前端发起跨域请求:在发送跨域请求的JavaScript代码中,需要设置请求头以指示该请求是一个跨域请求。可以使用XMLHttpRequest或fetch API来发送请求,并在请求头中添加以下字段: ```javascript fetch('http://api.example.com/data', { method: 'GET', headers: { 'Content-Type': 'application/json', 'Origin': 'http://example.com' // 请求源 }, credentials: 'include' // 发送Cookie }) .then(response => { // 处理响应 }) .catch(error => { // 处理错误 }); ``` 通过以上步骤,Java后端设置了CORS支持,允许特定源访问资源,并在JavaScript前端发送跨域请求时设置了请求头,指示该请求是一个跨域请求。这样就可以解决跨域问题。请注意,实际应用中需根据自己的需求和安全考虑进行适当的配置。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值