springmvc教程-@CrossOrigin注解实现ajax跨域 作者：马育民 • 2020-12-08 22:19 • 阅读：10112 # 前后台分离 前后端分离的项目，前端项目与后端项目部署在两个不同的域下 # 跨域问题 前端项目，要通过ajax访问后端项目，由于部署在不同的服务器下，出于安全原因，浏览器禁止 Ajax 调用本网站以外的服务器资源 详见 [浏览器同源政策及其规避方法](https://www.malaoshi.top/show_1IXBXRNJyf2.html "浏览器同源政策及其规避方法") # 解决 Spring Framework 4.2 GA为跨域问题提供了解决方案，也就是说springMVC的版本要在4.2或以上版本才支持跨域 通过下面注解解决： ``` @CrossOrigin ``` 允许在 `@RequestMapping` 注解中指定的所有源和HTTP方法 ### 2个参数： - allowCredentials：是否带上cookie，默认为 false 带上cookie：`@CrossOrigin(allowCredentials = "true")`。还需要ajax配合，见下面例子 - origins ： 允许可访问的域列表 - maxAge：设置 Preflight 请求缓存多长时间（以秒为单位）。 ### 使用 可修饰类、方法 # 不适用场景（关键） 跨域发请求，分为 **简单请求** 和 **非简单请求**，这种方式，仅适用 **简单请求**，不适用 **非简单请求** 因为 **非简单请求** 先发送 `OPTIONS` 方法的预检请求，详见 [链接](https://www.malaoshi.top/show_1IXBXRNJyf2.html "链接") # 例子 ### 简单使用 ``` @RestController @RequestMapping("rest_index") @CrossOrigin( allowCredentials = "true") public class IndexController{ ``` ### 设置参数 ``` @RestController @RequestMapping("rest_index") @CrossOrigin(origins = "http://192.168.1.10:8080", maxAge = 3600,allowCredentials = "true") public class IndexController{ ``` 指定该controller中所有方法都能处理来自 http:19.168.1.10:8080 中的请求 # ajax例子 ### jquery ``` $.ajax({ url:baseUrl+'goods/list', type:'post', dataType:'json',//服务器端返回的数据格式是json xhrFields: { //带上cookie withCredentials: true }, data: { "status":1 },//发给服务器端的数据 success:function(res){ //data:服务器端返回给浏览器端的数据 if(res.code==0){ console.log(res) }else{ alert(res.msg); } }, error:function (XMLHttpRequest, textStatus, errorThrown) { alert(XMLHttpRequest); alert(textStatus); alert(errorThrown); } }); ``` ### axios ``` axios.get( baseUrl+'goods/list?status=1', {withCredentials: true}//带cookie ).then(function(res){ console.log(res.data); }) ``` 或者 ``` axios.defaults.withCredentials = true;//带cookie axios.get(baseUrl+'goods/list?status=1').then(function(res){ console.log(res.data); }) ``` 原文出处：http://www.malaoshi.top/show_1IXBXU2w3PD.html