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

2 篇文章 0 订阅
1 篇文章 0 订阅

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

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

这里介绍两种解决方式。

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

        第一种方式是通过CORS(Cross-Origin Resource Sharing)跨域资源共享的方式实现。
        在web.xml文件中设置CORS内容,如果后台开发人用的是tomcat服务器的话,则在web工程的web.xml文件中添加一下内容即可:

<!--解决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-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调试会有点问题,第二种方式兼容性较好,主流浏览器调试正常。

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

评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值