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

转自：http://blog.csdn.net/u012406177/article/details/58602824?locationNum=1&fps=1

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

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

这里介绍两种解决方式。

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

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

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

 <filter>
 <span style="white-space:pre">  span><filter-name>CORSfilter-name>
 <span style="white-space:pre">  span><filter-class>com.thetransactioncompany.cors.CORSFilterfilter-class>
 <span style="white-space:pre">  span><init-param>
 <span style="white-space:pre">      span><param-name>cors.allowOriginparam-name>
 <span style="white-space:pre">      span><param-value>*param-value>
 <span style="white-space:pre">  span>init-param>
 <span style="white-space:pre">  span><init-param>
 <span style="white-space:pre">      span><param-name>cors.supportedMethodsparam-name>
 <span style="white-space:pre">      span><param-value>GET, POST, HEAD, PUT, DELETEparam-value>
 <span style="white-space:pre">  span>init-param>
 <span style="white-space:pre">  span><init-param>
 <span style="white-space:pre">      span><param-name>cors.supportedHeadersparam-name>
 <span style="white-space:pre">      span><param-value>Accept, Origin, X-Requested-With, Content-Type, Last-Modifiedparam-value>
 <span style="white-space:pre">  span>init-param>
 <span style="white-space:pre">  span><init-param>
 <span style="white-space:pre">      span><param-name>cors.exposedHeadersparam-name>
 <span style="white-space:pre">      span><param-value>Set-Cookieparam-value>
 <span style="white-space:pre">  span>init-param>
 <span style="white-space:pre">  span><init-param>
 <span style="white-space:pre">      span><param-name>cors.supportsCredentialsparam-name>
 <span style="white-space:pre">      span><param-value>trueparam-value>
 <span style="white-space:pre">  span>init-param>
 filter>
 <filter-mapping>
 <span style="white-space:pre">  span><filter-name>CORSfilter-name>
 <span style="white-space:pre">  span><url-pattern>/*url-pattern>
 filter-mapping>

这是通过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调试会有点问题，第二种方式兼容性较好，主流浏览器调试正常。

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