React+Express部署Azure后仅首页可用，其他路由报401错误

1. 初始401问题：部署到Azure后，访问非首页路由（如/Login、/Submitted）时，Azure会将请求直接发送到Express后端。由于这些前端路由没有对应的后端路由定义，请求会流转到verifyJWT中间件，而页面请求本身未携带JWT Token，因此触发401 Unauthorized错误。
2. 修改路由后页面加载失败：将app.get('/')改为app.get('/*')后，静态资源请求（如CSS、JS文件）也被该路由拦截，返回了index.html而非实际资源文件，导致页面无法正确解析资源，最终加载失败。

1. 调整后端路由顺序与SPA Fallback配置 #

要确保静态资源优先处理，公共API路由在SPA Fallback之前，SPA Fallback路由在认证中间件之前，这样前端页面请求不会触发JWT验证，同时静态资源能正常加载。

修改服务端index.js代码如下：

require('dotenv').config();
const express = require('express');
const app = express();
const path = require('path');
const bodyParser = require('body-parser');
const cors = require('cors');

const sequelize = require("./config/database");
const loginController = require('./controllers/loginController');
const invitesController = require('./controllers/invitesController'); // 确保导入对应控制器

const verifyJWT = require('./middleware/verifyJWT');
const verifyRoles = require('./middleware/verifyRoles');
const cookieParser = require('cookie-parser');
const credentials = require('./middleware/credentials');
const corsOptions = require('./config/corsOptions');

const PORT = process.env.PORT || 5000;

// 加载中间件
app.use(credentials); 
app.use(cors(corsOptions)); 
app.use(express.json()); 
app.use(bodyParser.urlencoded({extended: true}));
app.use(cookieParser());

// 1. 优先处理静态资源：返回build文件夹中的静态文件
app.use(express.static(path.join(__dirname, 'Client', 'build')));

// 2. 公共API路由（无需JWT验证）
app.route('/login').post(loginController.handleLogin);

// 3. SPA Fallback：非API的GET请求返回index.html，交给React Router处理
app.get('*', (req, res) => {
  // 过滤API路径，避免API请求被返回页面
  const apiPaths = ['/login', '/invites'];
  if (!apiPaths.some(path => req.path.startsWith(path))) {
    res.sendFile(path.resolve(__dirname, 'Client', 'build', 'index.html'));
  }
});

// 4. JWT验证中间件：仅对后续API路由生效
app.use(verifyJWT);

// 5. 需要认证的API路由
app.route('/invites').get(verifyRoles(1, 2), invitesController.getAllInvites);

// 启动服务
sequelize.sync().then(() => {
  app.listen(PORT, () => console.log(`Server running on port ${PORT}`));
});

2. 修复React静态资源路径 #

在Client/package.json中添加homepage字段，确保静态资源使用相对路径，避免Azure上的路径匹配错误：

{
  "name": "client",
  "homepage": ".",
  // 其他原有配置...
}

添加后重新在Client目录执行npm run build，确保build后的静态资源路径正确。

3. Azure部署配置检查 #

• 确保通过VS Code部署时，选择的是项目根目录（MyApp），而非Client子目录。
• 在Azure App Service的配置面板中，确认启动命令为npm start，且根目录的package.json中start命令指向后端入口文件：

  {
    "scripts": {
      "start": "node index.js",
      // 其他脚本...
    }
  }
  

1. 本地重新执行npm run build（Client目录下）。
2. 启动后端服务，测试访问http://localhost:5000/Login、http://localhost:5000/Submitted等路由，确认页面能正常加载且API请求工作正常。
3. 重新部署到Azure App Service，验证非首页路由是否能正常访问，无401错误。

内容的提问来源于stack exchange，提问作者It hurts when IP