react-dev-inspector icon indicating copy to clipboard operation
react-dev-inspector copied to clipboard

[Feat] Allow customization of EditorServer's BaseUrl | 希望能自定义`EditorServer`的`BaseUrl`

Open BanShan-Alec opened this issue 1 year ago • 4 comments

需求背景

跳转EditorServer使用的url,使用的是相对路径'/__open-stack-frame-in-editor'; 当我把开发服务器地址,反代理到域名时,则会出现gotoServerEditor失败的情况。

失败现象

abc.com/123转发到我的开发服务器地址localhost:5233时,则会出现问题。 image

希望优化

有个配置入口,如EditorServerBaseUrl: 'localhost:5233',让我写死请求的baseUrl,再拼接路径'/__open-stack-frame-in-editor'。

关联代码

https://github.com/zthxxx/react-dev-inspector/blob/6d1f63565305b5acc4c2ccadf7878ffa75f10144/packages/inspector/src/Inspector/utils/editor.ts

image

BanShan-Alec avatar Jun 20 '24 11:06 BanShan-Alec

虽然我可以配置把abc.com/__open-stack-frame-in-editor 转发到 localhost:5233/__open-stack-frame-in-editor。 但每个项目的域名配置都不同,开发体验不好。

BanShan-Alec avatar Jun 20 '24 11:06 BanShan-Alec

想问问你们开发和代理链路是怎么样的?具体的 html / 静态资源 / 后端接口 / dev server 都是怎么代理的

zthxxx avatar Jun 20 '24 14:06 zthxxx

想问问你们开发和代理链路是怎么样的?具体的 html / 静态资源 / 后端接口 / dev server 都是怎么代理的

用纯前端项目vite脚手架的举例

  • dev server:https://localhost:4173/eew-management(请求index.html 包含静态资源)
  • 后端接口:直接请求后端域名:abc.com/api/v1/xxx (因为跨域,所以要使用dev server的proxy,或者反代理)
  • 代理链路:使用whistle反代理,把abc.com/eew-management的所有请求转发到dev server(使用反代理主要解决OAuth的cookie跨域问题)

BanShan-Alec avatar Jun 21 '24 01:06 BanShan-Alec

之后版本会放在右键菜单面板的配置中做自定义

image

现在的话,有两种方式

  1. <Inspector> 组件添加 onInspectElement 参数,自定义点击元素后的调整过程
  • https://react-dev-inspector.zthxxx.me/docs/inspector-component#oninspectelement
  1. 需要转发地址,
  • v2.1.0 (v2.1.0-beta.10) 之后是 /__inspect-open-in-editor
    • import { launchEditorEndpoint } from '@react-dev-inspector/launch-editor-endpoint'
  • v2.1.0 之前是 /__open-stack-frame-in-editor,没有导出路径

zthxxx avatar Jul 06 '24 13:07 zthxxx