前后端分离cors解决跨域问题

1.当前端调用后台接口时，提示如下错误，如下图：

2.解决方案。
第一步：在后台增加一个java类，如下：

package com.manage.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.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class CorsFilter implements Filter  {

    @SuppressWarnings("unused")
	private static String allowOrigin;
	private static String allowMethods;
	private static String allowCredentials;
	private static String allowHeaders;
	
	@SuppressWarnings("unused")
	private static String exposeHeaders;
	
	@Override
	public void destroy() {
		
	}
	/**
     * Access-Control-Allow-Origin：允许访问的客户端域名，例如：http://web.xxx.com，若为*，则表示从任意域都能访问，即不做任何限制。
     * Access-Control-Allow-Methods：允许访问的方法名，多个方法名用逗号分割，例如：GET,POST,PUT,DELETE,OPTIONS。
     * Access-Control-Allow-Credentials：是否允许请求带有验证信息，若要获取客户端域下的cookie时，需要将其设置为true。
     * Access-Control-Allow-Headers：允许服务端访问的客户端请求头，多个请求头用逗号分割，例如：Content-Type。
     * Access-Control-Expose-Headers：允许客户端访问的服务端响应头，多个响应头用逗号分割。
     */
	/**
	 * !!!!examples
	 * response.setHeader("Access-Control-Expose-Headers", exposeHeaders);  
	 * filterChain.doFilter(servletRequest, servletResponse);
     * response.setHeader("Access-Control-Allow-Origin", "*");
     * response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
     * response.setHeader("Access-Control-Allow-Headers", "x-requested-with,Authorization,Content-Type");
     * response.setHeader("Access-Control-Allow-Credentials", "true");
	 * */
	@Override
	public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain)
			throws IOException, ServletException {
		HttpServletRequest request = (HttpServletRequest) servletRequest;  
		HttpServletResponse response = (HttpServletResponse) servletResponse;
		String origin = request.getHeader("Origin");
		response.setHeader("Access-Control-Allow-Origin",origin);
        response.setHeader("Access-Control-Allow-Methods", allowMethods);  
        response.setHeader("Access-Control-Allow-Credentials", allowCredentials);  
        response.setHeader("Access-Control-Allow-Headers", allowHeaders);  
        response.setHeader("Access-Control-Max-Age", "3600");
        if("OPTIONS".equals(request.getMethod())){
            return;
        }
		filterChain.doFilter(servletRequest, servletResponse);
	}

	@Override
	public void init(FilterConfig filterConfig) throws ServletException {
		allowOrigin = filterConfig.getInitParameter("allowOrigin");
		allowMethods = filterConfig.getInitParameter("allowMethods");
		allowCredentials = filterConfig.getInitParameter("allowCredentials");
		allowHeaders = filterConfig.getInitParameter("allowHeaders");
		exposeHeaders = filterConfig.getInitParameter("exposeHeaders");
	}
}

第二步，在web.xml里增加如下代码：

 <!-- CORS过滤器 start  -->
    <filter>
        <filter-name>cors</filter-name>
        <filter-class>com.manage.filter.CorsFilter</filter-class>
		<init-param>
			<param-name>allowOrigin</param-name>
			<param-value>*</param-value>
		</init-param>
		<init-param>
			<param-name>allowMethods</param-name>
			<param-value>GET,POST,PUT,DELETE,OPTIONS</param-value>
		</init-param>
		<init-param>
			<param-name>allowCredentials</param-name>
			<param-value>true</param-value>
		</init-param>
		<init-param>
			<param-name>allowHeaders</param-name>
			<param-value>Content-Type,x-access-token,x-requested-with</param-value>
		</init-param> 
    </filter>
    <filter-mapping>
        <filter-name>cors</filter-name>
        <url-pattern>*</url-pattern>
    </filter-mapping> 
    <!-- CORS过滤器 end -->

3.如此前端就可以正常访问后台接口了。