06-若依前后端分离项目跨域问题解决方式
什么是跨域
跨域就是前后端分离项目前端无法把session等信息传递给后端服务器。跨域源自浏览器同源策略。同源策略是一种约定,同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。只要两个站点的域名或ip、端口、协议中的任意一个不同就认为是跨域。同源策略是为了保证web应用的安全性,但是会给开发造成麻烦。
解决跨域
ruoyi-vue 项目中使用了cors方式解决跨域问题。
CORS全称为 Cross Origin Resource Sharing(跨域资源共享)。这种方案对于前端来说没有什么工作量,和正常发送请求写法上没有任何区别,工作量基本都在后端这里。每一次请求,浏览器必须先以 OPTIONS 请求方式发送一个预请求(也不是所有请求都会发送 options),通过预检请求从而获知服务器端对跨源请求支持的 HTTP 方法。在确认服务器允许该跨源请求的情况下,再以实际的 HTTP 请求方法发送那个真正的请求。
这样做的好处是:只要第一次配好了,之后不管有多少接口和项目复用就可以了,一劳永逸的解决了跨域问题,而且不管是开发环境还是正式环境都能方便的使用。
在ruoyi-framework中的com.ruoyi.framework.config.ResourcesConfig 类中通过定义CorsFilter来实现。
ResourcesConfig实现了WebMvcConfigurer 接口,可以理解为,实现了这个接口中的方法,我们能自定义SpringMVC的配置。
直接上代码:
/*** 跨域配置*/
@Bean
public CorsFilter corsFilter()
{CorsConfiguration config = new CorsConfiguration();config.setAllowCredentials(true);// 设置访问源地址config.addAllowedOriginPattern("*");// 设置访问源请求头config.addAllowedHeader("*");// 设置访问源请求方法config.addAllowedMethod("*");// 有效期 1800秒config.setMaxAge(1800L);// 添加映射路径,拦截一切请求UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();source.registerCorsConfiguration("/**", config);// 返回新的CorsFilterreturn new CorsFilter(source);
}
这样就解决了跨域问题。
除此之外,还可以通过前端解决跨域问题。比如webpack的proxy 或axios ,具体的不在展开。平时我们自己开发,建议使用cors方式。
06-若依前后端分离项目跨域问题解决方式相关推荐
- 前后端分离项目跨域问题及解决方案
目录 1.什么是跨域 2.前后端分离项目中的跨域问题 3.方法一:SpringBoot后端进行处理 4.方法二:在Vue前端进行处理 5.总结 1.什么是跨域 请求同域资源: 在域名 (或 ip 地址 ...
- Spring Boot2.x-13前后端分离的跨域问题解决方法之Nginx
文章目录 概述 浏览器同源策略 后台搭建 pom.xml interceptor 配置 Controller 启动测试 浏览器和session 后端工程发布到服务器上 问题复现 通过Nginx反向代理 ...
- 前后端分离框架跨域问题解决
1. 跨域问题的产生 前端向后台请求,但是后台与前台不是同一个域中(域名,端口,协议任一不同就不是同一个域),那么就会产生跨域问题. 2.跨域问题解决 2.1 传统的项目那么可以直接在Filter过滤 ...
- Vue flask前后端分离解决跨域
Vue flask前后端分离解决跨域 安装axios 在项目目录下输入:npm install axios--save-dev 配置axios 在main.js中引入axios import axio ...
- 解决java前后端分离端口跨域问题
解决java前后端分离端口跨域问题 参考文章: (1)解决java前后端分离端口跨域问题 (2)https://www.cnblogs.com/mollie-x/p/10449686.html 备忘一 ...
- Vue+Flask前后端分离 Vue3跨域配置
Vue+Flask前后端分离 Vue3跨域配置 前端端口号为8080 后端端口号为5000 问题描述 问题解决 接口路径映射 前端端口号为8080 后端端口号为5000 后端端口API 代码片. @a ...
- Day15(Js入门、jquery入门、ajax入门、前后端分离开发跨域问题、linux环境准备、jdk_tomcat环境搭建、docker介绍及应用(docker安装、基本命令、安装tomcat))
js入门 js代码辅助 window–>preferences–>javaScript–>Content Assist .abcdefghijklmnopqrstuvwxyz alt ...
- 前后端分离的跨域解决方案
声明: 在以往的开发中,前后端分离也不是像现在这么热门,所谓的前端工程师也只不过是写好静态页面由Java工程师或者php工程师嵌入到页面中进行开发,这或许加重了这些工程师的工作量,而且在样式调试上由纯 ...
- 前后端分离与跨域的解决方案(CORS的原理)
前后端分离 前后端分离的好处 最大的好处就是前端JS可以做很大部分的数据处理工作,对服务器的压力减小到最小. 后台错误不会直接反映到前台,错误接秒较为友好. 由于后台是很难去探知前台页面的分布情况,而 ...
最新文章
- Linux修改终端显示前缀及环境变量
- Hadoop1.x之hdfs集群搭建
- 阿里研究院潘永花:大数据将成为新的煤和石油
- Fabio技术手册(2):部署
- Beyond Compare 3 设置自动换行
- C++希尔密码Hill Cipher算法(附完整源码)
- emacs-w3m查看html帮助手册
- jq动态渲染后获取不到元素高度_浏览器的渲染机制
- python中变量和函数的区别_python中带下划线的变量和函数的意义
- linux的shell脚本if语句,Shell脚本编程之判断语句
- office选项-》高级-》显示 中, 显示此数目的“最近使用的文档” 为灰色,无法更改
- [自用版]博客日志下拉文本框的使用
- JS的构造及其事件注意点总结
- Django之Form组件补充
- Cause: the class org.apache.tools.ant.taskdefs.optional.junit.JUnitTask was not found
- java batik 乱码_Batik渲染png图片异常的bug修复
- 问题记录:linux权限不足(Permission denied)
- 左连接 oracle条件查询,sql 左连接查询条件and与where
- sony6000正在连接服务器,极速对焦+11张每秒连拍 Sony A6000评测
- eclipse安卓 DDMS中打不开Sdcard文件夹的问题