VUE跨域问题

前言

最近在练习VUE+ElmentUI的前后端分离，在向后台请求数据的时候，发生了跨域请求的问题，网上搜了好多方法，也不知道怎么处理。最后还是在后台代码中添加了跨域的响应头猜得以解决。

后台实现

在拦截器中添加header:

public class LoginInterceptor implements HandlerInterceptor {
	private static Logger logger = Logger.getLogger(LoginInterceptor.class.getName());
	
	@Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object o) throws Exception {
    	//我自己的逻辑
    	...
        response.setHeader("Access-Control-Allow-Origin", "*");//设置允许跨域请求
        //TODO: 我自己的逻辑
        ...
        return true;
    }

	//返回ModelAndView之前执行的方法，面向切面编程中的体现，已经进入了controller
    @Override
    public void postHandle(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse, Object o, ModelAndView modelAndView) throws Exception {
        logger.info("进入了postHandle。。。。。。");
    }

    //执行Handle完成之后执行的方法
    @Override
    public void afterCompletion(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse, Object o, Exception e) throws Exception {
        logger.info("进入了afterHandle。。。。。。");
    }
}

如上，只需要一行代码就可以解决了。

浏览器配置

除了代码实现，还可以对浏览器进行设置，使浏览器允许跨域请求。

IE浏览器的设置

路径：设置 -> Internet选项 -> 安全 -> 自定义级别：
在其他中设置：

火狐浏览器

火狐浏览器可以通过安装插件实现跨域请求：

谷歌浏览器¹

一、老版浏览器的跨域设置（版本号49之前）

1 右键点击 Chrome 快捷方式图标，选择“属性”。
2 在属性页面中的目标输入框尾部加上： --disable-web-security
3 点击“应用”并关闭属性页面。重新打开 chrome 浏览器。如果浏览器出现提示“你使用的是不受支持的命令标记 --disable-web-security”，那么说明配置成功。

二、新版浏览器的跨域设置（版本号49起）

（1）在电脑上新建一个目录，例如：C:\MyChromeDevUserData
（2）在属性页面中的目标输入框里加上： --disable-web-security --user-data-dir=C:\MyChromeDevUserData
（3）点击应用和确定后关闭属性页面，并打开 chrome 浏览器。发现有“–disable-web-security”相关的提示，说明 chrome 已经可以正常跨域工作了。

vue+axios的跨域请求配置

网上更多的是这种解决方案，但是我还不知道怎么操作。先插个眼，以后补充。

---

1. http://www.hangge.com/blog/cache/detail_1703.html ↩︎