最近在做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跨域。

Logo

前往低代码交流专区

更多推荐