前后台分离式开发实践-02-跨域问题

• 什么是跨域问题

ajax出现请求跨域错误问题,主要原因就是因为浏览器的“同源策略”,可以参考浏览器同源政策及其规避方法(阮一峰)

翻译一下就是：你通过ajax访问一个不在同一个服务器（或不是同一个端口的服务器）此时由于安全原因，导致无法访问，浏览器报错：

XMLHttpRequest cannot load http://localhost:8080/s_project/students. Origin null is not allowed by Access-Control-Allow-Origin.

XMLHttpRequest  就是ajax对象。

Origin null is not allowed by Access-Control-Allow-Origin. 就是跨域问题报的错。

更深层的东西，暂时忽略掉，有兴趣的，可以查询更多资料进行研究，这里不再深究，认识这个错就可以。

• 解决办法

网上关于跨域的解决有一大堆，这里不研究，可自行研究（对于初学者看那个兼职自虐）。这里复制即可（原作者信息保留），照着内容即可，以下相关内容：

1、跨域在web端通过filter过滤器实现（过滤器不知道的，后面的也不用看了）

package com.xxx.my.filter;

import java.io.IOException;
import java.util.Arrays;
import java.util.List;

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;

import com.xxx.my.utils.CollectionUtil;
import com.xxx.my.utils.StringUtil;

  
/**        
 * Title: 跨域访问处理(跨域资源共享)    
 * Description: 解决前后端分离架构中的跨域问题
 * @author rico       
 * @created 2017年7月4日 下午5:00:09    
 */      
public class CorsFilter implements Filter {

	private String allowOrigin;
	private String allowMethods;
	private String allowCredentials;
	private String allowHeaders;
	private String exposeHeaders;

	@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");
	}

	  
	/** 
	 * @description 通过CORS技术实现AJAX跨域访问,只要将CORS响应头写入response对象中即可
	 * @author rico       
	 * @created 2017年7月4日 下午5:02:38      
	 * @param req
	 * @param res
	 * @param chain
	 * @throws IOException
	 * @throws ServletException     
	 * @see javax.servlet.Filter#doFilter(javax.servlet.ServletRequest, javax.servlet.ServletResponse, javax.servlet.FilterChain)     
	 */  
	@Override
	public void doFilter(ServletRequest req, ServletResponse res,
			FilterChain chain) throws IOException, ServletException {
		HttpServletRequest request = (HttpServletRequest) req;
		HttpServletResponse response = (HttpServletResponse) res;
		String currentOrigin = request.getHeader("Origin");
		if (StringUtil.isNotEmpty(allowOrigin)) {
			List<String> allowOriginList = Arrays
					.asList(allowOrigin.split(","));
			if (CollectionUtil.isNotEmpty(allowOriginList)) {
				if (allowOriginList.contains(currentOrigin)) {
					response.setHeader("Access-Control-Allow-Origin",
							currentOrigin);
				}
			}
		}
		if (StringUtil.isNotEmpty(allowMethods)) {
			response.setHeader("Access-Control-Allow-Methods", allowMethods);
		}
		if (StringUtil.isNotEmpty(allowCredentials)) {
			response.setHeader("Access-Control-Allow-Credentials",
					allowCredentials);
		}
		if (StringUtil.isNotEmpty(allowHeaders)) {
			response.setHeader("Access-Control-Allow-Headers", allowHeaders);
		}
		if (StringUtil.isNotEmpty(exposeHeaders)) {
			response.setHeader("Access-Control-Expose-Headers", exposeHeaders);
		}
		chain.doFilter(req, res);
	}

	@Override
	public void destroy() {
	}
}

涉及两个工具类，也一并复制：

package com.xxx.my.utils;

import java.util.Collection;

  
/**        
 * Title: Collection 工具类    
 * Description: 
 * @author rico       
 * @created 2017年7月4日 下午5:14:01    
 */      
public class CollectionUtil {
    public static boolean isNotEmpty(Collection<?> c){
        if (c != null && c.size() != 0 ) {
            return true;
        }
        return false;
    }
}

package com.xxx.my.utils;

  
/**        
 * Title: 字符串工具类    
 * @author rico       
 * @created 2017年7月4日 下午5:15:29    
 */      
public class StringUtil {
      
    /**     
     * @description 给定字符串是否为空或空串
     * @author rico       
     * @created 2017年7月4日 下午5:15:46     
     * @param str
     * @return     
     */
    public static boolean isNotEmpty(String str) {
        if (str != null && str.length() != 0) {
            return true;
        }
        return false;
    }

    /**     
     * @description 给定字符串是否为空或空串
     * @author rico       
     * @created 2017年7月4日 下午5:15:46     
     * @param str
     * @return     
     */
    public static boolean isEmpty(String str) {
        if (str != null && str.length() != 0) {
            return false;
        }
        return true;
    }
}

2、配置web.xml相关的过滤规则

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" version="3.1">
  <display-name>s_project</display-name>

<!-- 通过CORS技术实现AJAX跨域访问 -->
	<filter>
		<filter-name>corsFilter</filter-name>
		<filter-class>com.xxx.my.filter.CorsFilter</filter-class>
		<init-param>
			<param-name>allowOrigin</param-name>
			<param-value>http://localhost:8090</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-Token</param-value>
		</init-param>
	</filter>
	<filter-mapping>
		<filter-name>corsFilter</filter-name>
		<url-pattern>/*</url-pattern>
	</filter-mapping>


</web-app>

3、重新运行即可，访问

ps：由于是初体验，建议读者不要过分究根追底，照着弄即可。需要完整源码的，可以自行下载

源码下载：https://download.youkuaiyun.com/download/u011698550/10470602