前端DEF部署和BUC接入的“跨域”坑
背景
第一次尝试react框架,在本地调试前端npm start,调用后端接口采用设置host 127.0.0.1 local-fishci2.alibaba.net,前端代码配置如下可完美解决本地跨域问题。
因为是自建平台且只需要部署daily环境,通过def部署前端工程后,遇到了HTTP和HTTPS协议不匹配,因为def部署后是https的,而我的服务端工程部署在daily环境默认都是http的。一开始以为是协议问题,但也没打算部署到线上环境,那样成本太大。最后发现是因为跨域了。于是“坑”就由此开始了.....
截止目前还是有个巨坑,对一只好无前端专业功底的小菜鸡的我来说太难了,希望能有同学能帮忙答疑解决一下。
跨域遇到的坑
坑一:This request has been blocked:the content must be served over HTTPS.
问了开发,告诉我如果解决跨域也就自然解决该问题了,这样的block是浏览器行为,无法提供服务端设置Access-Control-Allow-Origin解决问题。
解决方案:把页面拷贝到后端工程。
一开始以为迁移那么多页面和资源任务非常繁重,最后发现不需要。因为react pc代码多为单页面应用,只需要拷贝以下代码放到后端的template的目录index.html里。
后台Controller加一个页面跳转即可:
坑二:跳转到的不是页面,是个字符串
于是尝试了加静态资源的路径配置:spring.resources.static-locations=classpath:/templates/,依然保持原样
再次尝试修改addResourceHandlers方法,依然没用
解决方案:需要增加这种thymeleaf模板类型的依赖,就能跳转到index页面了。
3、坑三:因为是服务端公用的,不想占用index路径,想前面增加一层目录/fyapp/,切换到已有的FyAppController类中增加了跳转,又变成“index”字符串了。
找了很多资料和原因,尝试了各种解决方案,一直怀疑是目录层级多了一层的关系,最终找到了一个巨坑:**@RestController注解**
解决方案:去掉@RestController注解改成@Controller
之前没注意到这个注解,因为接口返回json都使用习惯了,但是**@RestController是@ResponseBody和@Controller的结合体。(坑二那边是因为新建的Controller没有使用这个注解)** ** 这下相当于页面和资源都融合在服务端代码里了,访问服务端的域名就顺利访问了!这样一通操作下来,前端还是可以用之前的host域名来调试,访问的是本地静态资源,服务端页面引用的是cdn上的资源,也没有太大关系。
BUC接入再遇跨域问题
尝试接入了集团的buc,这样一来再使用前端的host绑定域名就直接报错:
看接口返回应该是从HTTPS到HTTP发生了安全降级,尝试了很多方法都无解。
最后只能通过服务端的域名进行本地调试,但是服务端引用的是cdn上的资源,本地改了前端代码,不能生效,这对于本地调试来说是阻塞性的问题。
临时解决方案:
(1)在服务端判断域名,来路由本地或cdn上的资源
index.html引用资源一定要加上“crossorigin”,即允许前端资源被跨域访问,否则localhost无法访问local-fish2.alibaba.net。
(2)安装chrome插件:Switcheroo Redirector,配置host映射。(效果等同于(1))
遗留问题:
前端react工程是lazy懒加载机制打包的,这样可以减少上传时候的包体积,于是有些资源是动态生成不可控制,依然存在动态生成的静态资源如8.css,8.js路径是服务端域名,本地无法访问。
导致页面报错:
笨办法:
备份一个路由文件,本地调试的时候选用去掉懒加载的方案,上传到def进行部署时,切换回来。但是每次这样来回改文件名也非常痛苦。
感想
没有真正意义上的“前后端分离”。要么就是资源和页面都在服务端,要不就是页面在服务端,资源在cdn上。
“跨域”无处不在。前端访问后端会遇到,后端调前端资源也会遇到,问题展现的形式真是多种多样啊~ 希望有牛人能帮忙指点或一起参与讨论。
前端DEF部署和BUC接入的“跨域”坑相关推荐
- 前端如何使用proxyTable和nginx解决跨域问题
前端如何使用proxyTable和nginx解决跨域问题 参考文章: (1)前端如何使用proxyTable和nginx解决跨域问题 (2)https://www.cnblogs.com/webhmy ...
- vue反向代理解决跨域及部署nginx端口转发解决跨域
1. 前言 本文是为了解决vue反向代理解决跨域及部署服务器nginx端口转发解决跨域,因为踩了不少的坑,百度了很多,也试了太多的方法,最终得以解决,所以记录一下,希望遇到同样问题的友友们可以高效的解 ...
- 一步步教你前端vue项目开发中如何解决跨域问题
文章目录 开发环境中跨域 名词解释 1.同源策略: 2.同源: 3.跨域: 4.代理服务器: 解决方式 项目背景 跨域配置 1.配置说明: A.参数proxy详解: B.pathRewrite详解: ...
- Springboot第二篇:与前端fetch通信(附springboot解决跨域方法)
说到与前端通信,明白人都知道这章肯定会写两部分的东西啦. 关于后台 ①首先回顾前文,上一章环境搭建如图: ②我们在maven.example.controller下添加一个文件,并附上如图代码: ③: ...
- 不同版本浏览器前端标准兼容性对照表以及CORS解决跨域和CSRF安全问题解决方案
CORS也已经成为主流的跨域解决方案,不过CORF也会引发CSRF,本文先分享第三方的一个前端工具箱全面展示那些浏览器版本支持CORS,由于各家浏览器厂商因为各自原因在不同的版本里支持的标准不同,这个 ...
- 前端学习(2442):解决跨域问题
1.同源策略如下: URL 说明 是否允许通信 http://www.a.com/a.js http://www.a.com/b.js 同一域名下 允许 http://www.a.com/lab/a. ...
- Node.js 模块化的操作,简单明了的代码帮助你明白后端的实现和前端之前的交互,及解决跨域等问题
Node.JS 模块化 1.require 导入模块const http=require('http')2.exports 导出模块db={name:'jine',age:22} module.e ...
- 前端js爬虫绕过同源策略无需跨域配置
写了一个小说阅读器,基于Vue开发的h5+app. 零成本,无服务器,纯前端跨域爬取数据. 网络小说爬取功能 前端js直接爬取各小说网页的数据,无需跨域. 同源策略是浏览器的行为, 我们可以用操作系统 ...
- 前端:下载文件实现方式及跨域下载(详解)
前言:本文详细介绍在开发过程中前端如何与后端配合实现文件下载至本地,并详细说明特殊格式文件如何处理.如果你是一名前端开发者,恰好需要实现后端文件下载至本地的需求,那么恭喜你本篇文章一定会帮到你! 需求 ...
最新文章
- idea中项目失去svn控制
- 从RBM(受限玻尔兹曼机)开始、到深度信念网络(DBN)再到自动编码器(AE)
- 学界 | 邢波团队提出 contrast-GAN:实现生成式语义处理
- 专访UC伯克利人工智能教授:机器学习的最强敌人是谁?
- mysql clomn_mysql 备份脚本
- time.h 详细介绍
- TLS/SSL测试工具
- 【Win32汇编】MOVS,STOS,REP 指令
- BZOJ1026 [SCOI2009]windy数 数位dp
- linux usb xhci ehci,ehci和xhci有什么区别
- C++ 常用算法之遍历
- linux reboot命 过程,IDRAC安装dell服务器操作系统(linux or windows),用到生命周期管理器...
- Unity5 Survival Shooter开发笔记2
- 阿里 前端 规范_不懂源码的前端不是真正的前端
- 【错误记录】springboot项目报错Field xxx in com.xx.xx.xx.impl.xxImpl required a bean
- 108. 将有序数组转换为二叉搜索树
- IPv6升级改造包括什么?
- 八年级英语下册计算机教学总结,初中信息技术教学工作总结
- javascript 实现blob加密视频(html video),服务端为php
- 认识Oracle DBFS文件系统
热门文章
- 普华集团翟山鹰:从0到1玩转自媒体“小思路“ 轻松赚大钱
- 417. 太平洋大西洋水流问题(medium) -力扣(leetCode)逆流而上,JS图的深度优先遍历算法
- paperwhite3翻页_亚马逊Kindle Paperwhite第二代评论-以及新的Kindle软件更新
- 捷信2020年亏45亿元:CEO称今年肯定盈利 在华两高管离职 近半年投诉激增万条
- linux ftp cmd被动模式,如何在Windows命令提示符下使用被动FTP模式?
- 日常训练 20170708 贝加尔湖畔baikal
- ABCD四个人说真话的概率都是1/3。假如A声称B否认C说D是说谎了,那么D说过的那句话真话的概率是多少...
- C++课程设计报告--通讯录管理系统
- FPGA----ZCU106基于axi-hp通道的pl与ps数据交互(全网唯一最详)
- 品优购的界面设计要求_品优购项目