遇到这个问题的起因
- 当前的前端项目需要菜单栏修改样式,样式参考另外一个项目。
- 这两个项目需要的 node 版本差距过大:8.17.0 18.17.0(平时我通过 nvm 快速切换 node 版本,但是现在要同时运行)
- 我有个远程桌面,用于部署前端项目(node 18.17.0),但是这个远程桌面只可通过 VPN 访问且外面的文件可复制进远程桌面而远程桌面的文件不能复制出来。
- 为什么不直接抄远程桌面的样式?因为部署的前端项目的菜单栏是水平的而我要抄的菜单栏是垂直的,两者代码除布局外其余代码一致,路由是动态路由,意味着我没网络请求就没数据即没菜单栏。
- 想法:本机运行 8.17.0 的项目,远程桌面运行 18.17.0 的项目,这个项目是通过开发环境启动的,不能影响生产环境的。一切准备工作搞好之后, npm run start 打开的项目就可能会报这个错误(代理没处理好引起的)
分析
我目前在网上了解到以下两种情况:
- 浏览器禁用 JavaScript 脚本,以谷歌为例:
- 代理问题
解决
- 查看是否因为禁用 JavaScript 脚本执行的原因(不太可能)
- 重新安装浏览器
- 修改前端项目的代理配置或者 nginx 的代理配置
我解决的过程
对比远程桌面上跑的本地项目和部署的项目:
本地跑的项目:
部署的项目:
通过查看前端代理配置文件和上面两个项目的请求,发现两者请求的实际地址是不一样的。
打包运行的环境不一样: npm run start 开发环境, npm run build 是生产环境,此项目最直观的表现就是基础路由不一致,但是此处的环境不需要修改,因为代理文件只配置了开发环境的基础路由,如下两图:
只要把这里的代理配置改为:
app.use(
"/_data",
createProxyMiddleware({
target: "http://10.80.2.20:1615",
changeOrigin: true,
pathRewrite: { "^/_data": "/prod-api" },
})
);
成功截图
这是系统后端刚好正在更新导致的,不是问题: