后端(spring boot)解决跨区域问题
一.环境:
前端 vue element-ui
后端:spring boot
工具:IDEA Maven Node
数据库:MySql
二.首先我们需要了解什么叫跨区域访问问题
跨区域访问是指:不同域名之间相互访问
也就是A网址通过AJAX发送请求访问B网站 A和B在不同IP或者不同端口的时候会出现这个问题
三:什么是同一个域
同一协议 同一IP 同一端口 三者一不相同 出现跨区域访问问题
四:前端vue 跨区域解决方案
最快的方式是通过安装vue-resource,找到当前前端项目
输入:npm install vue-resource --save
然后在需要使用的地方添加vue-resource
import Vue from 'vue' import VueResourse from 'vue-resource'; Vue.use(VueResourse) let params=this.ruleForm this.$http.get('http://localhost:8080/login/CheckLogin',{params}).then((res)=>{ console.log("res=====>"+JSON.stringify(res)) }).catch((res)=>{ console.log("res=====>"+JSON.stringify(res)) })
五:后端跨区域解决方案
后端跨区域比较简单,最好的方法就是添加:@CrossOrigin
@Controller @RequestMapping(value = "/login") @CrossOrigin public class loginController { private final Logger logger = LoggerFactory.getLogger(loginController.class); @Autowired UserService userService; /** * 登录密码校验模块 */ @ResponseBody @RequestMapping(value = "/CheckLogin", method = RequestMethod.GET) @CrossOrigin public String CheckLogin(@RequestParam Map<String,Object> map) { logger.info("登录操作=>开始入参"+JSON.toJSONString(map)); MessageBean messageBean=new MessageBean(); messageBean=userService.selectUser(map); logger.info("登录操作=>结束"+JSON.toJSONString(messageBean)); return JSON.toJSONString(messageBean); } }
即可以解决跨区域问题
恐惧源于无知,代码改变世界