vue实现跨域

前言

本小白最近在一个小项目，是用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后面跟着即可，然后就可以测试了

仅供参考，答案不唯一。