ajax，post，get跨域请求报Access-Control-Allow-Origin 错误解决办法

背景了解：最近在做一个自动化校验的系统，这也是我第一次遇到页面和接口分开的项目，前端是用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 {

}

结语：解决办法还有很多，大家可以去尝试尝试，以后我遇到新的解决办法也会在博客里更新的。