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

​ 在我们做web项目项目时,前端和后端都是不同的开发人员负责,到某个时间点必然要进行前后端数据交互,这时候就会遇到跨域问题。这里介绍两种解决方式。

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

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

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

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

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

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

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
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部分按照下面的方式设置:

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

默认情况下widthCredentialsfalse,我们需要设置widthCredentialstrue

有一点需要注意,设置了widthCredentialstrue的请求中会包含远程域的所有cookie,但这些cookie仍然遵循同源策略,所以你是访问不了这些cookie的。
以上是我在实际项目中用到的两种方式,第一种方式用chrome调试会有点问题,第二种方式兼容性较好,主流浏览器调试正常。

不过一定要记得,这个仅仅作为前后端交互调试之用,

开发完成后记得删除这些跨域部分,

避免项目上线之后出现安全问题。切记!

作者

wonderomg

发布于

2017-02-28

更新于

2017-07-13

许可协议

评论