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

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控制，因此完全失控

情况及解决

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

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

app.all('*', function(req, res, next) {  
  res.header("Access-Control-Allow-Origin", "*");  
  res.header("Access-Control-Allow-Headers", "X-Requested-With,xtoken");  
  res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");  
  res.header("X-Powered-By",' 3.2.1')  
  res.header("Content-Type", "application/json;charset=utf-8");  
  next();  
}); 

就是这段跨域的代码，影响了JS的加载。
将跨域处理端代码的顺序置换成以下顺序即可：

//----------------------------- Cookie -------------------------------------
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());


//----------------------------- 静态资源 ------------------------------------
app.use(express.static(path.join(__dirname, 'public/dist')));



//----------------------------- 跨域处理-------------------------------------
app.all('*', function(req, res, next) {  
  res.header("Access-Control-Allow-Origin", "*");  
  res.header("Access-Control-Allow-Headers", "X-Requested-With,xtoken");  
  res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");  
  res.header("X-Powered-By",' 3.2.1')  
  res.header("Content-Type", "application/json;charset=utf-8");  
  next();  
}); 

express中间件处理的顺序导致了此问题，JS的静态资源应该先行加载，而不应在静态资源处理之前就被跨域允许控制拦截。

由于跨域只是为了URL API的调用，在处理中间件及router之前即可，不应在静态资源控制之前。

重启服务器，浏览器清除缓存

重启服务器，浏览器清除缓存后，问题就解决了：

Done！