前后端分离，前端跨域访问后台的两种方式

前后端分离，前端跨域访问后台的两种方式        

        在我们做web项目项目时，前端和后端都是不同的开发人员负责，到某个时间点必然要进行前后端数据交互，这时候就会遇到跨域问题。

这里介绍两种解决方式。

方式1：如果开发是tomcat服务器，在工程的web.xml添加设置

        第一种方式是通过CORS（Cross-Origin Resource Sharing）跨域资源共享的方式实现。

        在web.xml文件中设置CORS内容，如果后台开发人用的是tomcat服务器的话，则在web工程的web.xml文件中添加一下内容即可：

	CORS
	com.thetransactioncompany.cors.CORSFilter
	
		cors.allowOrigin
		*
	
	
		cors.supportedMethods
		GET, POST, HEAD, PUT, DELETE
	
	
		cors.supportedHeaders
		Accept, Origin, X-Requested-With, Content-Type, Last-Modified
	
	
		cors.exposedHeaders
		Set-Cookie
	
	
		cors.supportsCredentials
		true
	


	CORS
	/*

这是通过CORS（Cross-Origin Resource Sharing）跨域资源共享的方式实现。这种方式对chrome浏览器调试有点问题，firefox及IE调试正常。

方式2：通过ajax和过滤器实现跨域

        第二种方式是通过往请求消息头中加Access-Control-Allow-Origin。

        Access-Control-Allow-Origin是HTML5 添加的新功能，设置这个属性值为你前端所在服务器的ip地址。

首先后台添加过滤器AccessFilter.java：

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.HttpServlet;
import javax.servlet.http.HttpServletResponse;

import org.springframework.beans.factory.annotation.Value;

/**   
 * @Title: AccessFilter.java 
 * @Description: TODO(设置其他IP地址的机器可以直接访问本项目Url--工具filter) 
 */
public class AccessFilter extends HttpServlet implements Filter{
    
    /**
     * 序列ID，用来监测控制版本更新的
     */
    private static final long serialVersionUID = 1L;
    
    @Value("${test.mavenspring.project.allow.url}")
    private String projectDemoAllowOriginUrl;

    @Override
    public void init(FilterConfig filterConfig) throws ServletException {               
    }

    //设置其他IP地址的机器可以直接访问到这个项目的后端
    @Override
    public void doFilter(ServletRequest request, ServletResponse response,
            FilterChain chain) throws IOException, ServletException {
        
        HttpServletResponse httpResponse = (HttpServletResponse) response;
        httpResponse.setHeader("Access-Control-Allow-Origin", projectDemoAllowOriginUrl);
        httpResponse.setHeader("Access-Control-Allow-Headers","Origin, X-Requested-With, Content-Type, Accept");
        httpResponse.setHeader("Access-Control-Allow-Credentials", "true");
        chain.doFilter(request, httpResponse);
                
    }

}

然后在前端js的ajax部分按照下面的方式设置：

$.ajaxSettings.xhrFields = {
    withCredentials : true
};
$.ajax({
    crossDomain : true,
    type : 'post',
    url : 'http://...',
    dataType : 'json',
    data : '...',
    //其他处理不变
});

默认情况下widthCredentials为false，我们需要设置widthCredentials为true。

有一点需要注意，设置了widthCredentials为true的请求中会包含远程域的所有cookie，但这些cookie仍然遵循同源策略，所以你是访问不了这些cookie的。

以上是我在实际项目中用到的两种方式，第一种方式用chrome调试会有点问题，第二种方式兼容性较好，主流浏览器调试正常。

不过一定要记得，这个仅仅作为前后端交互调试之用，开发完成后记得删除这些跨域部分，避免项目上线之后出现安全问题。切记！