前后端分离,使用cors-filter解决跨域资源访问的问题

原创 2018年04月16日 10:35:13

        最近做的一个项目,形式是前后端分离的,那么就会产生跨域资源访问的问题,在这个项目中我们使用的是CORS-FILTER解决这个问题的,使用起来很简单,下面我会粘出一篇详细介绍cors-filter的文章,

CORS原理,主要包含两方面:
   1,从浏览器脚本放面:通过严格控制交换数据的类型来允许跨域请求。除非是由XHR作者发起的特定请求,且允许跨域web服务,否则 Cookies等数据将被锁。如此就减轻了数据泄露的风险。
               2,从web Service的方法:通过利用浏览器报告的源URL,目标跨域web Service能够基于自己的源策略确定是否允许还是拒绝本次请求。
项目当中实际使用:

              1,先在web.xml中引入如下配置:
<!-- 加入跨域过滤器配置 -->
<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> 

               2,在pom文件中引入如下maven的坐标:
                               
<dependency>
    <groupId>com.thetransactioncompany</groupId>
    <artifactId>cors-filter</artifactId>
    <version>2.6</version>
</dependency>


                3,就是这么的任性,ok了,下面这个连接有cors-fiter原理及由来的一个详细的介绍,
                           https://blog.csdn.net/xiaofeixiaqing/article/details/51250401

彻底解决前端开发在前后端分离过程中的跨域问题

现在的web工程越来也大,传统的开发模式已经显得捉襟见肘了,不仅开发人员在开发过程中很痛苦,后期维护的人员也更痛苦。怎么解决呢?前后端分离。在前后端开发过程中一直会伴随我们的问题就是跨域问题,因为这时...
  • wang839305939
  • wang839305939
  • 2017-06-23 16:18:05
  • 10342

前后端分离跨域问题解决方案

声明:在以往的开发中,前后端分离也不是像现在这么热门,所谓的前端工程师也只不过是写好静态页面由Java工程师或者php工程师嵌入到页面中进行开发,这或许加重了这些工程师的工作量,而且在样式调试上由纯h...
  • zhang6622056
  • zhang6622056
  • 2017-07-17 14:28:16
  • 5406

java 浅析跨域问题以及如何使用Cors解决前后端分离部署项目所遇到的跨域问题

随着时间的推移,前后端分离的开发形式越来越流行,使用的公司也越来越多。但是这种开发形式也会带来一个问题。那就是跨域问题。 什么是跨域 跨域,指的是浏览器不能执行其他网站的脚本。它是由浏...
  • liboyang71
  • liboyang71
  • 2017-09-06 15:39:27
  • 1301

前后台分离开发,nginx解决跨域问题

项目采用前后端分离开发的模式,这就不可避免的遇到了跨域问题,我前台页面ajax需要请求小伙伴的后台接口,解决办法如下 配置nginx,修改conf,     server {         l...
  • wm5920
  • wm5920
  • 2016-12-08 20:29:51
  • 3665

前后端分离nginx配置,同时解决跨域问题

背景现在,web开发的前后端分离技术越来越火爆,由于最近的课程设计使用了前后端分离的方案,这里就来记录一下前后端分离的项目部署。这里我们使用的前端框架是react,后台使用ssm提供数据接口。ngin...
  • CFrieman
  • CFrieman
  • 2017-12-25 23:15:51
  • 566

前后端分离,java配置跨域请求问题

需要的jar包 cors-filter.jar 在web.xml中加入以下配置       cors          com.thetransactioncompany.cors.CORSFilt...
  • athur666
  • athur666
  • 2017-04-25 14:45:46
  • 964

解决:ssm前后端分离设置跨域导致SessionId不一致的问题

问题描述:后台使用ssm,前端angularJS,最近在开发过程中开始尝试前后端分离的开发模式,意外的是前端html在发送ajax请求到我的服务器时,出现了跨域问题,请求发送不成功!解决:查看了大量的...
  • shw717383130
  • shw717383130
  • 2018-04-03 18:00:27
  • 53

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

方式1:如果开发是tomcat服务器,在工程的web.xml添加设置; 方式2:通过ajax和过滤器实现跨域。...
  • u012406177
  • u012406177
  • 2017-02-28 16:20:46
  • 6722

springcloud--zuul跨域访问问题

springcloud微服务框架,是一组组件,eureka服务注册中心,zuul路由等等一般都是在zuul上配好url路径映射到各个服务,所以对外都是访问zuul服务的端口,但是在web服务设置了跨域...
  • c5113620
  • c5113620
  • 2018-01-22 18:27:30
  • 8754

前后端分离,ajax前端跨域访问后端

当我们做前后端分离项目的时候,有时候前结合后端做调试的时候,就面临前端要跨域访问后端的情况,直接从前端跨域访问后端是需要在后端中做接受前端IP地址发出请求的接受处理,这句话很拗口,简单讲就是你要在后端...
  • u014001866
  • u014001866
  • 2016-01-21 20:11:01
  • 13070
收藏助手
不良信息举报
您举报文章:前后端分离,使用cors-filter解决跨域资源访问的问题
举报原因:
原因补充:

(最多只允许输入30个字)