前言
本小白最近在一个小项目,是用SSH做后端,用VUE做前端。然后在后端传输json数据给前端的时候发生了跨域问题,需要在访问头加点料。解决这个问题请教了大神,他给我最简单处理跨域的方式。只需要两步。
第一步
首先在Java项目中写一个过滤器
过滤器源码:
package com.bdqn.it.ui.filter;
import java.io.IOException;
import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.annotation.WebFilter;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* Servlet Filter implementation class AccessFilter
*/
@WebFilter("/*")
public class AccessFilter implements Filter {
/**
* Default constructor.
*/
public AccessFilter() {
// TODO Auto-generated constructor stub
}
/**
* @see Filter#destroy()
*/
public void destroy() {
// TODO Auto-generated method stub
}
/**
* @see Filter#doFilter(ServletRequest, ServletResponse, FilterChain)
*/
public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)
throws IOException, ServletException {
HttpServletResponse resp = (HttpServletResponse) response;
HttpServletRequest req = (HttpServletRequest) request;
// 支持跨域请求
resp.setHeader("Access-Control-Allow-Origin",req.getHeader("Origin"));
// 是否支持cookie跨域
resp.setHeader("Access-Control-Allow-Credentials", "true");
resp.setHeader("Access-Control-Allow-Headers", "*");
resp.setHeader("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
resp.setHeader("Access-Control-Max-Age", "5000");
chain.doFilter(request, resp);
}
/**
* @see Filter#init(FilterConfig)
*/
public void init(FilterConfig fConfig) throws ServletException {
// TODO Auto-generated method stub
}
}
然后在web.xml中加载这个过滤器,注意:一定要放在Struts2之前。
过滤器源码:
<!-- 前后端数据交互跨域需要在请求前面加请求头 -->
<filter>
<filter-name>allowAccess</filter-name>
<filter-class>com.bdqn.it.ui.filter.AccessFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>allowAccess</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
第二步
在vue项目的main.js文件中加入一行代码即可。下面我们去看看哈。
在导入axios后面跟着即可,然后就可以测试了
仅供参考,答案不唯一。