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

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

Paste_Image.png

JsonTest

click me

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("" + JSON.stringify(data["code"]) + "

");

$("#d1").append("" + JSON.stringify(JSON.stringify(data)) + "

");

}

});

});

普通参数跨域：

服务端在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("")

@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("")

.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的配置

这个配置和上面Java方式的第一种作用一样。

同样，你可以做更复杂的配置：

allowed-origins=", "

allowed-methods="GET, PUT"

allowed-headers="header1, header2, header3"

exposed-headers="header1, header2" allow-credentials="false"

max-age="123" />

allowed-origins="" />

我用的方式是基于xml的方式，结果如下：

Paste_Image.png