写点什么

前端 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:002022

评论 1 条评论

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

Qt示例 | 数字时钟 Digital Clock Example

YOLO.

qt 10月月更 C++

IP设计是什么?为什么它很重要?

龙智—DevSecOps解决方案

知识产权 IP 芯片开发 IP核 IP核设计

浅谈理想中的业务开发模式

久歌

架构 开发 技术架构 服务编排

SAP | abap基本语法规则

暮春零贰

SAP abap 10月月更

BizWorks助力企业应用的高效开发与复用

阿里云E2企业云服务

阿里云 开发者 云原生 低代码

SmartBear与龙智宣布建立战略合作伙伴关系

龙智—DevSecOps解决方案

合作 龙智

面向函数编程:关于函数式组件、dialog的api化

默默的成长

前端 Vue 3 10月月更

odejs+Redis实现简易消息队列

coder2028

node.js

常用的文本检测与识别方法 - 第一节【文本检测与识别-白皮书-第三章】

合合技术团队

人工智能 机器学习 AI 文字识别 文字擦除

Vue 2x 中使用 render 和 jsx 的最佳实践 (3)

默默的成长

前端 Vue 3 10月月更

GameFi链游系统开发(NFT链游)

薇電13242772558

NFT

彻底搞懂JS原型与原型链

hellocoder2029

JavaScript

APICloud AVM 框架 纵向滚动通知栏组件

YonBuilder低代码开发平台

AIGC时代到来?聊聊其中最出圈的语言模型GPT-3

Baihai IDP

AI NLP 大模型 AIGC GPT-3

细说Js中的this

hellocoder2029

JavaScript

保10万涨薪、保Offer、保大厂,1V1私教服务上线啦

测试人

软件测试 涨薪 测试开发

Nodejs中的进程间通信

coder2028

node.js

制造业转型加速密钥——低代码开发平台

力软低代码开发平台

模块二作业

知足🐏

细说js变量、作用域和垃圾回收

hellocoder2029

JavaScript

ITSM | Forrester发布报告,7大重要见解总结IT运营状况

龙智—DevSecOps解决方案

IT运维

一文读懂NodeJs知识体系和原理浅析

coder2028

node.js

Nodejs相关ORM框架分析

coder2028

node.js

Java 19中新推出的虚拟线程到底是怎么回事儿?

Hollis

Java

推荐有礼 | 京东云推荐返利活动说明

京东科技开发者

京东云 云推客 代理商 分销 渠道

图解ReentrantReadWriteLock读写锁的实现原理

JAVA旭阳

Java 并发 10月月更

2022-webpack5实战教程

Geek_02d948

webpack

CEF | 探索实现基于CEF框架的客户端

YOLO.

qt 10月月更 C++

TypeScript介绍和使用

默默的成长

typescript 前端 10月月更

代码静态测试 | MISRA是什么?如何使用它来改进嵌入式编码?

龙智—DevSecOps解决方案

c 嵌入式设计 嵌入式开发

研发流程管理中,如何实现项目管理与代码信息的协同?

LigaAI

研发管理 解决方案 #GitLab LigaAI 企业号十月PK榜

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