背景了解:最近在做一个自动化校验的系统,这也是我第一次遇到页面和接口分开的项目,前端是用node.js跑的,后端是用tomcat,以下面登录功能为例,页面访问后端登录接口时,浏览器报以下错误。
has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource意思就是:
“已被CORS策略阻止:请求的资源上不存在“Access-Control-Allow-Origin”标头”
原因:出于对用户信息的保护,也保证我们请求不产生混乱,浏览器的同源策略要求我们只能访问同源的资源,我页面服务器的端口是8888,tomcat的端口是8080,不同同源所以访问失败。
图片来源:http://www.cnblogs.com/rainman/archive/2011/02/20/1959325.html
解决办法:网上的解决办法很多,我测试了下面两种简单的办法,亲测可用。
我的前端是vue.js+element,后端是java的ssm框架
方法一:既然说了“”请求的资源上不存在“Access-Control-Allow-Origin”标头””,name我就在controller文件对应的方法里给他添加一个标头就好了
/**
* 查询当前登录用户的信息
* DSY
*/
@RequestMapping(value = "/login", method = RequestMethod.GET)
@ResponseBody
public User login(HttpServletResponse response, @RequestParam(value="username")String username,@RequestParam(value="password")String password) {
response.setHeader("Access-Control-Allow-Origin", "*");
return loginService.getUser(username, password);
}
方法二:注意 !!!如果你用的也是spring框架,并且版本在4.2以上,可以用@CrossOrigin这个注解,括号中的url可以换成“”*“”,如果这个controller里有多个方法,注解可以直接写在类的最上边。
写在方法上
/**
* 查询当前登录用户的信息
* DSY
*/
//写在方法上
@CrossOrigin(origins = "http://localhost:8080/") // 实现跨域 要求spring的版本必须4.2以上
@RequestMapping(value = "/login", method = RequestMethod.GET)
@ResponseBody
public User login(HttpServletResponse response, @RequestParam(value="username")String username,@RequestParam(value="password")String password) {
return loginService.getUser(username, password);
}
写在类上
/**
* 登录相关
* DSY
*/
//写在类上,不用每个方法都写这个注解了
@CrossOrigin(origins="*",maxAge=3600)
@RestController
public class LoginController {
}
结语:解决办法还有很多,大家可以去尝试尝试,以后我遇到新的解决办法也会在博客里更新的。