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

转自：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文件中添加一下内容即可：

[html]  view plain  copy

1. <!--解决tomcat部署跨域问题 -->  
2. <filter>  
3. <span style="white-space:pre">  </span><filter-name>CORS</filter-name>  
4. <span style="white-space:pre">  </span><filter-class>com.thetransactioncompany.cors.CORSFilter</filter-class>  
5. <span style="white-space:pre">  </span><init-param>  
6. <span style="white-space:pre">      </span><param-name>cors.allowOrigin</param-name>  
7. <span style="white-space:pre">      </span><param-value>*</param-value>  
8. <span style="white-space:pre">  </span></init-param>  
9. <span style="white-space:pre">  </span><init-param>  
10. <span style="white-space:pre">      </span><param-name>cors.supportedMethods</param-name>  
11. <span style="white-space:pre">      </span><param-value>GET, POST, HEAD, PUT, DELETE</param-value>  
12. <span style="white-space:pre">  </span></init-param>  
13. <span style="white-space:pre">  </span><init-param>  
14. <span style="white-space:pre">      </span><param-name>cors.supportedHeaders</param-name>  
15. <span style="white-space:pre">      </span><param-value>Accept, Origin, X-Requested-With, Content-Type, Last-Modified</param-value>  
16. <span style="white-space:pre">  </span></init-param>  
17. <span style="white-space:pre">  </span><init-param>  
18. <span style="white-space:pre">      </span><param-name>cors.exposedHeaders</param-name>  
19. <span style="white-space:pre">      </span><param-value>Set-Cookie</param-value>  
20. <span style="white-space:pre">  </span></init-param>  
21. <span style="white-space:pre">  </span><init-param>  
22. <span style="white-space:pre">      </span><param-name>cors.supportsCredentials</param-name>  
23. <span style="white-space:pre">      </span><param-value>true</param-value>  
24. <span style="white-space:pre">  </span></init-param>  
25. </filter>  
26. <filter-mapping>  
27. <span style="white-space:pre">  </span><filter-name>CORS</filter-name>  
28. <span style="white-space:pre">  </span><url-pattern>/*</url-pattern>  
29. </filter-mapping>  

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

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

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

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

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

[java]  view plain  copy

1. import java.io.IOException;  
2.   
3. import javax.servlet.Filter;  
4. import javax.servlet.FilterChain;  
5. import javax.servlet.FilterConfig;  
6. import javax.servlet.ServletException;  
7. import javax.servlet.ServletRequest;  
8. import javax.servlet.ServletResponse;  
9. import javax.servlet.http.HttpServlet;  
10. import javax.servlet.http.HttpServletResponse;  
11.   
12. import org.springframework.beans.factory.annotation.Value;  
13.   
14. /**    
15.  * @Title: AccessFilter.java  
16.  * @Description: TODO(设置其他IP地址的机器可以直接访问本项目Url--工具filter)  
17.  */  
18. public class AccessFilter extends HttpServlet implements Filter{  
19.       
20.     /** 
21.      * 序列ID，用来监测控制版本更新的 
22.      */  
23.     private static final long serialVersionUID = 1L;  
24.       
25.     @Value("${test.mavenspring.project.allow.url}")  
26.     private String projectDemoAllowOriginUrl;  
27.   
28.     @Override  
29.     public void init(FilterConfig filterConfig) throws ServletException {                 
30.     }  
31.   
32.     //设置其他IP地址的机器可以直接访问到这个项目的后端  
33.     @Override  
34.     public void doFilter(ServletRequest request, ServletResponse response,  
35.             FilterChain chain) throws IOException, ServletException {  
36.           
37.         HttpServletResponse httpResponse = (HttpServletResponse) response;  
38.         httpResponse.setHeader("Access-Control-Allow-Origin", projectDemoAllowOriginUrl);  
39.         httpResponse.setHeader("Access-Control-Allow-Headers","Origin, X-Requested-With, Content-Type, Accept");  
40.         httpResponse.setHeader("Access-Control-Allow-Credentials", "true");  
41.         chain.doFilter(request, httpResponse);  
42.                   
43.     }  
44.   
45. }  

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

[javascript]  view plain  copy

1. $.ajaxSettings.xhrFields = {  
2.     withCredentials : true  
3. };  
4. $.ajax({  
5.     crossDomain : true,  
6.     type : 'post',  
7.     url : 'http://...',  
8.     dataType : 'json',  
9.     data : '...',  
10.     //其他处理不变  
11. });  

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

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

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

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