Java跨域问题以及如何使用Cors解决前后端 分离部署项目所遇到的跨域问题
Java跨域问题以及如何使用Cors解决前后端 分离部署项目所遇到的跨域问题
什么是跨域
跨域,指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对javascript施加的安全限制。
什么情况下不是跨域?
即:满足域名、协议、端口均相同的即不是跨域。
场景
现在我们进行前后端分离的部署,将前端的代码与后端的代码放到不同的服务器上,此时前端要使用ajax请求来调用后台的接口获取到对应的数据。
解决方案
一般解决跨域问题的方案有两种,jsonp以及cors。因为jsonp需要前后台做配合统一标示个人感觉比较麻烦,所以本人选择使用cors方案来解决此问题。
cors介绍
Cross-Origin Resource Sharing (CORS) 是W3c工作草案,它定义了在跨域访问资源时浏览器和服务器之间如何通信。CORS背后的基本思想是使用自定义的HTTP头部允许浏览器和服务器相互了解对方,从而决定请求或响应成功与否。
cors与jsonp对比
CORS与JSONP相比,更为先进、方便和可靠。
1、 JSONP只能实现GET请求,而CORS支持所有类型的HTTP请求。
2、 使用CORS,开发者可以使用普通的XMLHttpRequest发起请求和获得数据,比起JSONP有更好的错误处理。
3、 JSONP主要被老的浏览器支持,它们往往不支持CORS,而绝大多数现代浏览器都已经支持了CORS。
对一个简单的请求,没有自定义头部,要么使用GET,要么使用POST,它的主体是text/plain,请求用一个名叫Orgin的额外的头部发送。Origin头部包含请求页面的头部(协议,域名,端口),这样服务器可以很容易的决定它是否应该提供响应。
服务器端对于CORS的支持,主要就是通过设置Access-Control-Allow-Origin来进行的。
Header set Access-Control-Allow-Origin *
为了防止XSS攻击我们的服务器, 我们可以限制域,比如
Access-Control-Allow-Origin: http://baidu.com
代码实现
首先经过对上面的阅读我们对跨域以及cors进行了初步的了解。现在我们来思考一个问题。跨域应该前端进行配置还是后端进行配置?答案当然是后端。试想一下,如果这个问题是由前端解决而后台不需要任何配置,那么岂不是你随便写一个ajax就能访问各种网站的各种接口了吗。这就有点恐怖了。所以理所应当的应该我们后台开发来配置这个是否允许跨域请求的开关,并且能做一定的限制和筛选。
前端代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello world</title>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript" src="js/jquery-3.1.1/jquery-3.1.1.js"></script>
</head>
<body>
<div id="app">
<p>hello</p>
</div>
</body>
<script>
$(function(){
alert("ajax go");
$.ajax({
url:'http://192.168.14.131:8080/student/getInfo',
type:'post',
dataType:'text',
success:function(data){
alert(data);
}
});
}
)
</script>
</html>
如果我们不做任何跨域处理访问的话,会报如下错误,大概意思也就是说我们没有配置Access-Control-Allow-Origin这个头。
后台代码
我们的核心代码来了,其实很简单,只要将报错的属性设置到response头部,即可解决此问题,所以我们只要提供一个过滤器或者一个拦截全部的AOP即可解决此问题。代码如下(本人使用的springboot进行开发,只要了解问题的本质,将下面的方法有选择性的使用即可。)
方法一(使用Filter)
/**
- @desc 解决跨域
*/
@Component
public class CrossFilter implements Filter {
public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
HttpServletResponse response = (HttpServletResponse) res;
//如果要做细的限制,仅限某域名下的可以进行跨域访问到此,可以将改为对应的域名。
response.setHeader("Access-Control-Allow-Origin", "");
response.setHeader("Access-Control-Allow-Methods", "");
response.setHeader("Access-Control-Max-Age", "1728000");
response.setHeader("Access-Control-Allow-Credentials", "true");
response.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
// response.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
chain.doFilter(req, res);
}
public void init(FilterConfig filterConfig) {}
public void destroy() {}
}
方法二(使用AOP)
//证明是一个配置文件(使用@Component也可以,因为点入后会发现@Configuration还是使用了@Component)
@Configuration
//证明是一个切面
@Aspect
public class ControllerAOP {
//环绕aop
//execution表达式 此表达式表示扫描controller下所有类的所有方法都执行此aop
@Around("execution ( com.beyondli.controller...(..))")
public Object testAop(ProceedingJoinPoint pro) throws Throwable {
//获取response
HttpServletResponse response = ((ServletRequestAttributes) RequestContextHolder.getRequestAttributes()).getResponse();
//核心设置
response.setHeader("Access-Control-Allow-Origin", "*");
//执行调用的方法
Object proceed = pro.proceed();
return proceed;
}
}
写这篇文章的目的主要是因为现在前后端分离越来越多,跨域问题碰到的概率越来越高,所以写出这篇文章,希望可以帮助到有需要的同学。
本文参考csdn中beyondLi71同学的文章
Java跨域问题以及如何使用Cors解决前后端 分离部署项目所遇到的跨域问题相关推荐
- Nginx完美解决前后端分离端口号不同导致的跨域问题
Nginx完美解决前后端分离端口号不同导致的跨域问题 参考文章: (1)Nginx完美解决前后端分离端口号不同导致的跨域问题 (2)https://www.cnblogs.com/PyKK2019/p ...
- Vue整合nginx:(1)开发环境npm run dev下,通过nginx解决前后端分离造成的跨域问题
Vue整合nginx:(1)开发环境npm run dev下,通过nginx解决前后端分离造成的跨域问题 参考文章: (1)Vue整合nginx:(1)开发环境npm run dev下,通过nginx ...
- 视频教程-SpringBoot2+Vue+AntV前后端分离开发项目实战-Java
SpringBoot2+Vue+AntV前后端分离开发项目实战 10多年互联网一线实战经验,现就职于大型知名互联网企业,架构师, 有丰富实战经验和企业面试经验:曾就职于某上市培训机构数年,独特的培训思 ...
- JAVA外卖项目第九天 前后端分离和项目部署优化
瑞吉外卖项目优化-Day03 课程内容 前后端分离开发 Yapi Swagger 项目部署 前言 当前项目中,前端代码和后端代码混合在一起,是存在问题的,存在什么问题呢? 主要存在以下几点问题: 1) ...
- vue和Java做数据交互_基于vue和springmvc前后端分离,json类接口调用介绍
基于vue和springmvc前后端分离,json类接口调用介绍 版本要求:spring-3.2.9.RELEASE.vue-2.9.2.axios-0.17.1,其中axios作为http clie ...
- Java权限管理|基于springBoot+springSecurity+jwt实现前后端分离用户权限认证
基于springBoot+springSecurity+jwt实现前后端分离用户权限认证 1. 项目说明 主要基于前后端分离情况下用户权限认证, 当用户登录认证成功后,每个用户会获取到自己的tok ...
- 动静分离java html_动静分离-前后端分离部署
#静态态资源文件分离发布 遇到的问题 多节点web服务器部署期间,访问静态资源可能会出现404. 为什么? 如果java进程我们以jar打包的方式打包文件并启动.假设有N多个pod,客户端请求会随机访 ...
- 解决前后端分离中文件传输跨域失败问题
笔者在之前的开发中就遇到过这种情况:给与后端的文件下载接口,我在浏览器在postman上试过都是可以的,但在前端上就报这种错误: 看上面的介绍是说前后端跨域问题,可是后端代码中明明配置了放行所有请求, ...
- nginx配置反向代理解决前后端分离跨域问题
2019独角兽企业重金招聘Python工程师标准>>> 摘自<AngularJS深度剖析与最佳实践>P132 nginx配置文件如下: server {listen 80 ...
- Spring Boot笔记-解决前后端分离在开发时的跨域问题
这里可以用Nginx解决跨越问题,也可以用下面这种方式在开发时解决: @Configuration public class CorsConfig implements WebMvcConfigure ...
最新文章
- 基于先验LiDAR点云地图的单目VIO定位(IROS 2020)
- MATLAB基本操作(九):可视化矩阵的矢量场quiver函数
- 云炬随笔20211126(2)
- 真的了解js生成随机数吗
- 调整和改编赛车游戏——游戏屏幕
- 查看地区的ip段_「教程」CloudFlare 自选 IP优化网站速度
- Python数据分析:pandas玩转Excel(三)
- python个人所得税怎么写分录_个人所得税的会计分录!
- 路由器和iP地址的那些事
- 软件产品售后服务的内容方案
- 微信小程序金额千分位
- 使用 Roadrunner 为 PHP 程序加速
- ADO的RECORDSET的RECORDCOUNT属性总是为-1
- 乘大潮而崛起,浪潮云洲大有可为
- java计算矩形_用Java实现计算矩形的面积与周长
- Android 4.1.2微信版本,ttkefu在线客服系统
- Linux系统启动流程及服务管理控制
- Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: “/sear
- 【markdown】表格合并单元格
- 小记Android Gradle插件 Iven 记于 20190522 药厂