70+专家分享实战经验,2024年度AI最佳实践都在AICon北京 了解详情
写点什么

前端 DEF 部署和 BUC 接入的“跨域”坑

  • 2021-03-10
  • 本文字数:1524 字

    阅读完需:约 5 分钟

前端DEF部署和BUC接入的“跨域”坑

背景

第一次尝试 react 框架,在本地调试前端 npm start,调用后端接口采用设置 host 127.0.0.1 local-fishci2.alibaba.net,前端代码配置如下可完美解决本地跨域问题。


null


因为是自建平台且只需要部署 daily 环境,通过 def 部署前端工程后,遇到了 HTTP 和 HTTPS 协议不匹配,因为 def 部署后是 https 的,而我的服务端工程部署在 daily 环境默认都是 http 的。一开始以为是协议问题,但也没打算部署到线上环境,那样成本太大。最后发现是因为跨域了。于是“坑”就由此开始了.....


null


截止目前还是有个巨坑,对一只好无前端专业功底的小菜鸡的我来说太难了,希望能有同学能帮忙答疑解决一下。

跨域遇到的坑

坑一:This request has been blocked:the content must be served over HTTPS.

问了开发,告诉我如果解决跨域也就自然解决该问题了,这样的 block 是浏览器行为,无法提供服务端设置 Access-Control-Allow-Origin 解决问题。


解决方案:把页面拷贝到后端工程。


一开始以为迁移那么多页面和资源任务非常繁重,最后发现不需要。因为 react pc 代码多为单页面应用,只需要拷贝以下代码放到后端的 template 的目录 index.html 里。


null


null

后台 Controller 加一个页面跳转即可:

null

坑二:跳转到的不是页面,是个字符串


null

于是尝试了加静态资源的路径配置:spring.resources.static-locations=classpath:/templates/,依然保持原样

null


再次尝试修改 addResourceHandlers 方法,依然没用


null

解决方案:需要增加这种 thymeleaf 模板类型的依赖,就能跳转到 index 页面了。


null


3、坑三:因为是服务端公用的,不想占用 index 路径,想前面增加一层目录/fyapp/,切换到已有的 FyAppController 类中增加了跳转,又变成“index”字符串了。

找了很多资料和原因,尝试了各种解决方案,一直怀疑是目录层级多了一层的关系,最终找到了一个巨坑:**@RestController 注解**


解决方案:去掉 @RestController 注解改成 @Controller


之前没注意到这个注解,因为接口返回 json 都使用习惯了,但是**@RestController 是 @ResponseBody 和 @Controller 的结合体。(坑二那边是因为新建的 Controller 没有使用这个注解)** ** 这下相当于页面和资源都融合在服务端代码里了,访问服务端的域名就顺利访问了!这样一通操作下来,前端还是可以用之前的 host 域名来调试,访问的是本地静态资源,服务端页面引用的是 cdn 上的资源,也没有太大关系。

BUC 接入再遇跨域问题

尝试接入了集团的 buc,这样一来再使用前端的 host 绑定域名就直接报错:


null


看接口返回应该是从 HTTPS 到 HTTP 发生了安全降级,尝试了很多方法都无解。


null


最后只能通过服务端的域名进行本地调试,但是服务端引用的是 cdn 上的资源,本地改了前端代码,不能生效,这对于本地调试来说是阻塞性的问题。


临时解决方案:


(1)在服务端判断域名,来路由本地或 cdn 上的资源


null


index.html 引用资源一定要加上“crossorigin”,即允许前端资源被跨域访问,否则 localhost 无法访问 local-fish2.alibaba.net。

(2)安装 chrome 插件:Switcheroo Redirector,配置 host 映射。(效果等同于(1))

遗留问题:

前端 react 工程是 lazy 懒加载机制打包的,这样可以减少上传时候的包体积,于是有些资源是动态生成不可控制,依然存在动态生成的静态资源如 8.css,8.js 路径是服务端域名,本地无法访问。


null

导致页面报错:

null

笨办法:

备份一个路由文件,本地调试的时候选用去掉懒加载的方案,上传到 def 进行部署时,切换回来。但是每次这样来回改文件名也非常痛苦。


null

感想

  • 没有真正意义上的“前后端分离”。要么就是资源和页面都在服务端,要不就是页面在服务端,资源在 cdn 上。

  • “跨域”无处不在。前端访问后端会遇到,后端调前端资源也会遇到,问题展现的形式真是多种多样啊~ 希望有牛人能帮忙指点或一起参与讨论。


本文转载自:闲鱼技术(ID:XYtech_Alibaba)

原文链接:前端DEF部署和BUC接入的“跨域”坑

2021-03-10 14:001925

评论 1 条评论

发布
用户头像
我们的解决方法是在前端用 nginx 转发
2021-03-11 00:25
回复
没有更多了
发现更多内容

深度学习:理解卷积神经网络(CNN)的原理和应用

兴科Sinco

人工智能 神经网络 深度学习 自然语言 图象识别

Dapr和Rainbond集成,实现云原生BaaS和模块化微服务开发

北京好雨科技有限公司

云原生 #Kubernetes# Baas rainbond 企业号 4 月 PK 榜

华为云网站安全解决方案,如何保障中小型企业云上云下安全?

IT科技苏辞

实用技术宝典:MAC地址格式转换多种实现方式

小毛驴的烂笔头

linux命令 linux运维

解锁企业数据管理的利器——DataOps

数造万象

华为云EI引领行业智能化转型:赋能全球企业,共创智能未来

爱尚科技

华为云网站安全解决方案:为您的企业保驾护航,助力安心创造未来!

IT科技苏辞

走进 RocketMQ(五)高性能文件读写

白裤

Java RocketMQ 消息队列 文件读写优化

在 plist 中轻松转换两种格式

如何调整和优化Go程序的内存管理方式?

Jack

如何打开 plist 文件

ios 开发 IPA上传

这样也行,在lambda表达式中优雅的处理checked exception

程序那些事

Java stream 程序那些事

走进 RocketMQ(六)事务消息的设计

白裤

Java RocketMQ 事务消息 最终一致性

AI日课@20230411:Prompt的三个层次和三个“万万没想到!”

无人之路

ChatGPT

基于低代码开发平台打造新时代OA系统

力软低代码开发平台

华为云网络安全解决方案,云上云下一体助力企业安心发展

IT科技苏辞

谷歌研究科学家:ChatGPT秘密武器的演进与局限

OneFlow

海外 SaaS、工具、技术栈实用指南

SaaSLab

SaaS 技术栈 海外市场

DriveGPT自动驾驶大模型中国玩家首发!1200亿参数,毫末智行出品

Openlab_cosmoplat

人工智能 自动驾驶 机器学习 开源社区 ChatGPT

华为云网站安全解决方案:中小型企业的IT安全利器

IT科技苏辞

在线Plist文件格式转Json文件格式

MobTech 秒验|极速验证,拉新无忧

MobTech袤博科技

SELECT COUNT(*) 会造成全表扫描?回去等通知吧

程序员大彬

Java MySQL

【深入了解系统性能优化】「实战技术专题」全方面带你透彻探索服务优化技术方案(方案篇)

洛神灬殇

性能优化 JVM 软件开发 4月日更 编程体系

华为云EI:引领企业智能化转型,助力全球行业创新

爱尚科技

持续领先同行?看华为云EI如何助力企业智能化转型

爱尚科技

JMeter CSV 参数文件的使用方法

Liam

软件测试 测试 Jmeter csv

Django笔记八之model中Meta参数的使用

Hunter熊

Python django model meta

架构实战营第10期模块八作业

刘博

【异常解决】UnknownHostException: api.weixin.qq.com 的解决方案

No8g攻城狮

小程序 微信 Java EE

前端DEF部署和BUC接入的“跨域”坑_大前端_闲鱼技术_InfoQ精选文章