springmvc解决ajax post json格式数据的跨域问题

前言:今天解决js跨域,搞了一下午,呜呜,以下是我整理的一些解决方法。

Paste_Image.png
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JsonTest</title>
    <script type="text/javascript" src="js/jquery-3.2.0.min.js"></script>
</head>
<body>
    <div id="d1">
        <button id="btn" type="button">click me</button>
    </div>


    <script type="text/javascript">
        var jsonData = JSON.stringify({"username":"杨静", "passwprd":"12345", "address":"上海市"});

        $("#btn").on("click", function () {

            $.ajax({
                url:'http://127.0.0.1:8898/api/json',
                contentType: 'application/json;charset=UTF-8',
                type:'POST', //GET
                data: jsonData,
                dataType:'json',
                success : function (data) {
                    console.log(data);
                    $("#d1").append("<span>" + JSON.stringify(data["code"]) + "</span> <br />");
                    $("#d1").append("<span>" + JSON.stringify(JSON.stringify(data)) + "</span> <br />");
                }
            });

        });
    </script>
</body>
</html>
普通参数跨域:

服务端在response的头文件添加

httpServletResponse.setHeader("Access-Control-Allow-Origin","*");
httpServletResponse.setHeader("Access-Control-Allow-Methods","POST");
httpServletResponse.setHeader("Access-Control-Allow-Headers","Access-Control");
httpServletResponse.setHeader("Allow","POST");

Access-Control-Allow-Origin:| * // 授权的源控制
Access-Control-Max-Age:// 授权的时间
Access-Control-Allow-Credentials: true | false // 控制是否开启与Ajax的Cookie提交方式
Access-Control-Allow-Methods:[,]* // 允许请求的HTTP Method
Access-Control-Allow-Headers:[,]* // 控制哪些header能发送真正的请求

观察响应头


Paste_Image.png
带headr请求跨域:

这样客户端需要发起 OPTIONS请求, 可以说是一个“预请求”,用于探测后续真正需要发起的跨域 POST 请求对于服务器来说是否是安全可接受的,因为跨域提交数据对于服务器来说可能存在很大的安全问题。

因为Springmvc模式是挂壁OPTIONS请求的,所以需要开启。

Spring MVC 从4.2版本开始增加了对CORS的支持

在Spring MVC 中增加CORS支持非常简单,可以配置全局的规则,也可以使用@CrossOrigin
注解进行细粒度的配置。
使用@CrossOrigin注解
先通过源码看看该注解支持的属性:
在Controller上使用@CrossOrigin注解

@CrossOrigin(origins = "*", maxAge = 3600)
@RestController
@RequestMapping("/account")
public class AccountController {

    @RequestMapping("/{id}")
    public Account retrieve(@PathVariable Long id) {
        // ...
    }

    @RequestMapping(method = RequestMethod.DELETE, path = "/{id}")
    public void remove(@PathVariable Long id) {
        // ...
    }
}

这里指定当前的AccountController中所有的方法可以处理所有域上的请求,

在方法上使用@CrossOrigin注解

@CrossOrigin(maxAge = 3600)
@RestController
@RequestMapping("/account")
public class AccountController {

    @CrossOrigin("http://domain2.com")
    @RequestMapping("/{id}")
    public Account retrieve(@PathVariable Long id) {
        // ...
    }

    @RequestMapping(method = RequestMethod.DELETE, path = "/{id}")
    public void remove(@PathVariable Long id) {
        // ...
    }
}

在这个例子中,AccountController类上也有@CrossOrigin注解,retrieve方法上也有注解,Spring会合并两个注解的属性一起使用。

CORS全局配置
除了细粒度基于注解的配置,你可能会想定义一些全局CORS的配置。这类似于使用过滤器,但可以在Spring MVC中声明,并结合细粒度@CrossOrigin配置。默认情况下所有的域名和GET、HEAD和POST方法都是允许的。

基于JAVA的配置
看下面例子:

@Configuration
public class WebConfig extends WebMvcConfigurerAdapter {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**");
    }
}

您可以轻松地更改任何属性,以及配置适用于特定的路径模式的CORS:
如果你使用Spring Boot,你可以通过这种方式方便的进行配置。

@Configuration
public class WebConfig extends WebMvcConfigurerAdapter {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/api/**")
            .allowedOrigins("http://domain2.com")
            .allowedMethods("PUT", "DELETE")
            .allowedHeaders("header1", "header2", "header3")
            .exposedHeaders("header1", "header2")
            .allowCredentials(false).maxAge(3600);
    }
}

不限制任何请求(方便复制粘贴)

@Configuration
public class CorsConfig extends WebMvcConfigurerAdapter {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowedMethods("GET", "HEAD", "POST", "PUT", "PATCH", "DELETE", "OPTIONS", "TRACE");
    }
}

基于XML的配置

<mvc:cors>
    <mvc:mapping path="/**" />
</mvc:cors>

这个配置和上面Java方式的第一种作用一样。
同样,你可以做更复杂的配置:

<mvc:cors>

    <mvc:mapping path="/api/**"
        allowed-origins="http://domain1.com, http://domain2.com"
        allowed-methods="GET, PUT"
        allowed-headers="header1, header2, header3"
        exposed-headers="header1, header2" allow-credentials="false"
        max-age="123" />

    <mvc:mapping path="/resources/**"
        allowed-origins="http://domain1.com" />

</mvc:cors>

我用的方式是基于xml的方式,结果如下:

Paste_Image.png

推荐阅读更多精彩内容