Springboot跨域请求问题使用jsonp或者cross方法

最新推荐文章于 2025-01-12 22:27:38 发布

安蒙1278

最新推荐文章于 2025-01-12 22:27:38 发布

阅读量553

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/an1278/article/details/80830986

本文介绍了一个具体的前后端交互案例，包括前端如何通过Ajax发起JSONP请求来获取后端数据，并展示了如何处理这些数据以更新前端页面。同时，还提供了一个配置示例，用于设置跨域资源共享(CORS)，确保前后端能够正常通信。

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

前段页面端口66432，后端8080

ajax:

$(function(){
    var tbody = window.document.getElementById("tbody");
    window.alert("嗯哈到这了");
$.ajax({
    type:"get",
    url:'http://localhost:8080/notice/list',
    contentType:"application/json;charset=utf-8",
    dataType:"jsonp",
    jsonp:"callback",//用以获取回调函数的参数名
    jsonpCallback:"callback",  //定义回调函数名称
    data:{},
    success:function (msg) {
        if(msg.ret){
            var str = "";
            var data = msg.data;
            for(i in data){
                str += "<tr>"+
                    "<td>"+data[i].notitle+"</td>"+
                    "<td>"+data[i].notime+"</td>"+
                    "<td>"+data[i].noauthor+"</td>"+
                    "</tr>";
            }
            tbody.innerHTML = str;
        }
    },
    error:function () {
        alert("查询失败");
    }
});
});

后端请求数据是，获得callback，判断是否是jsonp格式

也可在项目的application中添加

@Configuration
public class CrossDomain extends WebMvcConfigurerAdapter {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**").allowedOrigins("*")
                .allowedMethods("GET", "HEAD", "POST","PUT", "DELETE", "OPTIONS")
                .allowCredentials(false).maxAge(3600);
    }
}