SpringBoot项目ajax 跨域post请求问题的完美解决方式（详细步

不正经的猿类 2018-06-28 13:35:29

10185

文章标签：前端 SpringBoot 跨域问题 ajax

最后发布:2018-06-28 13:35:29首次发布:2018-06-28 13:35:29

本文链接：https://blog.csdn.net/u013180183/article/details/80840767

版权

最近项目上不是很紧，想利用这段时间学学Es6的新特性，今天正好学到ES6为了解决js“回调地狱”问题出的Promise新对象。于是就使用以前写的SpringBoot项目做后台，前台就新写一个HTML文件。前后台都准备好了，就着手准备用ajax试试看接口可不可以走通，于是本次文章的主角便出现了--ajax post请求的跨域问题。

为什么会出现跨域问题？

首先我们要先了解一个概念--同源策略。同源策略，它是由Netscape提出的一个著名的安全策略。现在所有支持JavaScript 的浏览器都会使用这个策略。所谓同源是指，域名，协议，端口相同。目的是出于安全考虑，防止js脚本随意调用其他网站的资源。

问题描述

先把前后台的代码贴出来

后台controller

  //query all user
    @ResponseBody
    @RequestMapping(value = "/getAllUser",method= RequestMethod.POST)
    public List<User> getAllUser(@RequestBody Map<String,Object> reqMap){
        return userService.findAllUser(reqMap);
    }

前台js

$.ajax({
    url:'http://localhost:8080/user/getAllUser',
    data:{pageNum:3, pageSize:3},
    type:'post',
    dataType:'json',
    contentType: "application/json",
    success:function(data){
        alert("success");
        console.log(data);

    },
    error:function(reason){
       console.log(reason)
    }
});

显示如下错误，经查询后发现是跨域导致的错误

后台改进

在Application启动类中注册WebMvcConfigurer

@Bean
    public WebMvcConfigurer webMvcConfigurer() {
        return new WebMvcConfigurerAdapter() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/**").allowedOrigins("*");
            }
        };
    }

重新启动项目后浏览器报400错误

经过研究后发现是Json格式错误，ajax请求的是json格式，但是ajax发送过去的参数显然不是json格式，所以我们还需要将参数格式化为json格式然后传到后台。使用JOSN.stringify方法

改正后的后台代码：

$.ajax({
    url:'http://localhost:8080/user/getAllUser',
    data:JSON.stringify({pageNum:3, pageSize:3}),
    type:'post',
    dataType:'json',
    contentType: "application/json",
    success:function(data){
        alert("success");
        console.log(data);

    },
    error:function(reason){
       console.log(reason)
    }
});

再次刷新页面