React打包后，在NodeJS Express服务器中，前端JS失效问题

最新推荐文章于 2025-02-17 17:11:48 发布
最新推荐文章于 2025-02-17 17:11:48 发布
阅读量1.9k 收藏 2
点赞数
分类专栏： web 文章标签： Web NodeJS React Express
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/u011481543/article/details/79697921
版权
当React应用打包后部署到NodeJS Express服务器，可能出现前端JS失效问题，表现为部分JS代码不执行。经过排查，发现是Express的跨域中间件配置顺序不当导致，静态资源加载被提前拦截。解决方案是调整中间件顺序，确保静态资源处理在前，跨域设置在后。重启服务器并清除浏览器缓存后，问题得到解决。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

React打包后，在NodeJS Express服务器中，前端JS失效问题

本文前端：react为基础的Ant Design套件，官方地址：Ant Design
本文后端：Node.JS Express服务器

问题

在使用npm run build之后，得到压缩之后的release版本js及css代码。
将此压缩代码，放置于后端的服务器中，使其成为 静态资源 被HTML页面引用加载。
但出现问题，现象如下：

  1. 引用打包后的JS文件不完全起效，执行第一句console.log有效，但大部分的js托管的页面加载都无效
  2. HTML端能够看到引用的打包后的JS及CSS，文件无异常
  3. 没有产生JS错误
  4. 由于页面没有被js控制，因此完全失控

JS托管页面失效

情况及解决

由于在前端独立编译运行时，前端显示功能正常，所以，不是前端的webpack的问题，也不是前端的代码问题。

由于本文为了前后端分别开发、联合调试，因此，后端允许了跨域的方式，其在app.js中的实现方式：

最低0.47元/天 解锁文章
前端领域Node.js的前端性能优化方案实践
前端视界的博客
05-10 1247
随着前端应用日益复杂，性能问题已成为影响用户体验的关键因素。Node.js作为前端开发的重要工具，在构建流程、服务端渲染等方面发挥着核心作用。本文旨在提供一套完整的Node.js前端性能优化方案，涵盖从开发到生产环境的全链路优化策略。首先介绍核心概念和性能瓶颈然后深入各种优化技术的实现原理接着通过实际案例展示优化效果最后讨论工具链和未来发展趋势: 服务端渲染，在服务器端生成完整HTML页面: 客户端渲染，浏览器通过JavaScript动态构建页面: 从请求发出到收到第一个字节的时间。
node+nginx实现对react进行一键打包部署--windows版
m0_51311990的博客
06-25 1211
使用nginx+node实现对react项目进行打包,自动部署到本机.
h5 打包后效果失效
IT_iosers的博客
08-05 324
在 多行省略文本时 发现-webkit-line-clamp: 2;效果失效 出现布局问题 overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; overflow: hidden; -webkit-box-orient: vertical; 解决方式 通过/*! autoprefixer:
Vue.js打包后部分按钮无法正常显示
weixin_44202529的博客
07-03 1717
前段时间学习了Vue.js，并找了一个小项目练手，最后打包上线的时候发现了一些问题，在开发环境下，所有的模块都很正常，但是在生产环境下却有部分按钮无法正常显示。 在Vue.js中，按钮的功能一般是通过作用域插槽来实现的，作用域插槽可以使按钮能对一些数据进行相应的操作。 在我的项目中，我有部分按钮不需要传递参数，所以没有使用作用域插槽。代码如下： <template> <el-button type="primary" icon="el-icon-edit" size="mini"
React项目打包部署到服务器上的遇到的问题
QTFYING的博客
12-19 3263
上一篇我我们讲到关于vue-cli的项目部署的一些小坑，但是对于React项目，如果用create-react-app脚手架运行npm run build后，直接把build文件夹扔到服务器，也会出现同样的问题，怎么才能直接点击运行index.html呢？？？ 最简单的方法：个人比较推荐这种，省事----修改package.json 修改配置文件----node_modules/reac...
node+webpack+react 开发环境下断点调试打包监控进程相关
12-18 542
react 开发环境下断点调试 :   打包后的文件图分析   直接打开浏览器插件     const OpenBrowserPlugin = require('open-browser-webpack-plugin')     plugins: [         new webpack.DefinePlugin({             'proc...
nodeJS打包安装和问题处理
dcujcivw769565的博客
06-10 380
一，执行步骤，打包报错 1，查看npm版本npm -v 2，查看gulp版本（报错怎么证明没安装）gulp --version 3，安装gulpnpm install --global gulp-cli 4，安装npm npm install 5，查看node版本（要选择稳定版，不要选最新版）node -v 6，这个问题是我将node版本升级至v12.3....
coderwhy 前端系统课 react nodejs webpack 等
wchat_fee1024的博客
04-26 3769
1. 减少 HTTP 请求 一个完整的 HTTP 请求需要经历 DNS 查找，TCP 握手，浏览器发出 HTTP 请求，服务器接收请求，服务器处理请求并发回响应，浏览器接收响应等过程。接下来看一个具体的例子帮助理解 HTTP ： 这是一个 HTTP 请求，请求的文件大小为 28.4KB。 名词解释： Queueing: 在请求队列中的时间。 Stalled: 从TCP 连接建立完成，到真正可以传输数据之间的时间差，此时间包括代理协商时间。 Proxy negotiation: 与代理
react +express 实现双token 无感刷新
最新发布
hd321660606的博客
02-17 358
express + react 实现双token验证
钉钉开发网页应用JSAPI前端授权鉴权nodejs实现
m0_74825360的博客
12-21 514
官方提供的步骤大致分为四个步骤（请务必阅读官方文档） 后端实现 这里使用express框架 (代码较多，主入口文件在，核心授权代码在中) index.js后端主入口 api/index.js 后端发送的请求 datas/config.json 配置参数 utils/getAccessToken.js 获取token，并且缓存 utils/getTicket.js 获取ticket并且缓存 utils/sign.js核心鉴权函数 最终效果 前端控制台输出
webpack打包js文件的问题
一捌柒的博客
08-10 2250
前言 这里记录下webpack打包js文件的配置和遇到的问题。因环境版本等不同，解决办法未必都是通用的，仅作为大家参考之用； 我的环境配置 macOS M1 系统 webpack版本：(全局版本）webpack 5.49.0，webpack-cli 4.7.2 node版本：v14.17.4 开发工具：webstorm 学习自建目录结构 dist目录下存放的是我们webpack打包后的最终js输出文件 node_modules 是我们安装项目本地的webpack后，目录自动生成的，全局和本地的webpa
react打包部署到服务器上样式加载不出来
qq_36990322的博客
03-19 2303
问题 react打包部署到服务器上样式加载不出来。 其实经过仔细核查代码，发现本地能加载出来所有样式，在index.js首页的样式也能加载出来，但是每个路由组件的自定义样式不能加载出来。 问题前提 在项目中进行了动态import，且路由组件本身引入了自定义的css文件 在服务器端或者index.html页面设置了 内容安全策略Content-Security-Policy style-src ...
react的ant-design-pro打包上线踩坑记录-v4
baibaibaiya的博客
11-13 1057
最近写了一个ant-design-Pro的管理系统，要部署上线了，原本我以为就简简单单npm run build就可以的，但是发现有问题。然后我查询了一下官方文档，发现部署后遇到404的问题要在config.js中添加一个history:hash，如下。 但是改了之后还是在报404，之后发现我是部署在非根目录下的，还需要在config.js之后添加： 当然archivesmanage这个是根据个人项目来写的。 按照官网的写完之后，我发现页面可以加载了，但是调用后台接口不行，感觉proxy上的更改根本没用
react项目打包后无法运行的问题
qq_43661347的博客
12-01 5684
react项目打包后运行，在生产环境下 npm/yarn build后 无法运行或者是资源路径出错 一. 在开发模式下，package.json下设置 homepage “homepage”:&amp;amp;quot;.&amp;amp;quot;, 以上设置会将 index.html中的%PUBLIC_URL%替换为 .,从而拼接为：./index.js这样的一个相对index.html的资源路径. 二. react使用的browserHis...
记录一下react代理 遇到的问题
月色真美121的博客
09-18 1082
react代理出现网络异常的情况
React+NodeJS+Express 环境搭建与部署
weixin_33769207的博客
06-30 979
链接 Mac安装nodejs和npm 替换为cnpm 使用create-react-app快速构建开发环境 使用npm init创建项目 配置webstorm 安装nodemon 使用webpack 部署神器pm2 部署到Linux 1 链接 个人博客: alex-my.xyz 优快云: blog.csdn...
React 打包部署服务器踩坑记录
小小云麓的博客
01-31 4872
公司项目前端开发用的是React,所以自己一直在本地测试开发，最后终于开始打包上线了 项目中用axios封装了工具类来请求，自动匹配开发和测试api if (process.env.NODE_ENV === 'development') { axiosIns.defaults.baseURL = '/dapi'; } else if (process.env.NODE_ENV =...
DecentraFiles: 构建匿名分布式文件存储平台指南
- Node.js：一个基于Chrome V8引擎的JavaScript运行环境，能够执行在服务器端的JavaScript代码，是构建网络应用的强大工具。 - Redis：一个开源的内存中数据结构存储系统，通常用作数据库、缓存和消息代理。它支持...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值