Vue+ssm跨域问题解决的两个办法

最近在做vue+ssm的项目，遇到跨域问题，下面说说我的理解：

基本项目的搭建：

ssm:

vue:

基本的项目搭建就不多说了，重点是跨域问题的解决，主要有两个方法。

方法一、注解式：

这种方法仅限于spring 4.x以上（这个x具体是多少我也不知道，包括我用的4.3.6都不行！！不行。所以大家试试这个方法，不行的就换filter解决，不要纠结注解怎么没有作用啊，filter拦截也是很简单的。下面是我用的4.3.6）

好了，开始吧：

在某方法上增加@CrossOrigin注解，括号内写允许访问的url：

@Controller
public class ControllerTest {
    @CrossOrigin(origins = "*")
	@RequestMapping("/")
	@ResponseBody
	public String a() {
		return "welcome to Tomcat Server.";
	}
	
}

在整个controller上加注解：（这样，整个controller都能跨域请求：包括/、/a...controlle下面的所有方法）

@CrossOrigin(origins = "*")
@Controller
public class ControllerTest {

	@RequestMapping("/")
	@ResponseBody
	public String a() {
		return "welcome to Tomcat Server.";
	}
	
	@RequestMapping("/a")
	@ResponseBody
	public String aa() {
		return "aaa.";
	}
	
}

注解式还需要配合vue的反向代理，才能使用哦！ 

 因为我的不能使用注解式，就不截图说明了，了解更多可以去查阅相关的文章。

方法二、filter过滤器式：

下面详细说说filter过滤器拦截。 

① 在src下新建一个filter包：

因为要实现Filter类，所以呢不建议手动新建class.!!!!!!!!!!千万不要手动新建class.

② 点击 项目部署=>filter,

 

③ 选择新建filter,选择新建的包

 ④ 取个名字，下一步

 

⑤ 点击finish：

他会默认实现Filter的方法：

 

⑥ 我们只关注一个方法，重写即可。（doFilter）

/**
	 * @see Filter#doFilter(ServletRequest, ServletResponse, FilterChain)
	 */
	public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {
		// TODO Auto-generated method stub
		// place your code here

		// pass the request along the filter chain
		chain.doFilter(request, response);
	}

 替换成：

public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
		// TODO Auto-generated method stub
		// place your code here
		HttpServletRequest request = (HttpServletRequest)req;
		HttpServletResponse response = (HttpServletResponse) res;
		String originHeader = request.getHeader("Origin");
		response.setHeader("Access-Control-Allow-Origin", originHeader);
		response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");  
		response.setHeader("Access-Control-Max-Age", "0");  
		response.setHeader("Access-Control-Allow-Headers", "Origin, No-Cache, X-Requested-With, If-Modified-Since, Pragma, Last-Modified, Cache-Control, Expires, Content-Type, X-E4M-With,userId,token");  
		response.setHeader("Access-Control-Allow-Credentials", "true");  
		response.setHeader("XDomainRequestAllowed","1");   
		response.setHeader("XDomainRequestAllowed","1");    
		// pass the request along the filter chain
		chain.doFilter(request, response);

 这里它的默认形参是 request、response：

public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)

我们要拦截网络请求，要转换为HttpServletRequest。注意一下参数的对应关系即可。

⑦ 在web.xml中加入以下代码：

<!-- 跨域问题解决 -->
	<filter>
		<filter-name>header</filter-name>
		<filter-class>com.ssm.filter.filter</filter-class>
	</filter>
	<filter-mapping>
		<filter-name>header</filter-name>
		<url-pattern>/*</url-pattern>
	</filter-mapping>

 <filter-class>就是你刚才创建的filter的位置，完整的包名+类名。

注解式删除了不要：

@Controller
public class ControllerTest {

	@RequestMapping("/")
	@ResponseBody
	public String a() {
		return "welcome to Tomcat Server.";
	}
}

⑧ 运行项目：

 ⑨ vue中不做代理，直接请求：

axios.get('http://localhost:8080/mvc/').then(res=>{
        console.log(res)
      }).catch(error=>{
        console.log(error);
      });

 成功解决springmvc跨域。