AntDesign Pro 构建部署后无法登录 Response status:404 ]

Question

🧐 问题描述 | Problem description

项目build部署后，无法登录。本地使用yarn start或者npm run start能正常登录。部署后无法登录， Response status:404 。

浏览器响应状态：

请求 URL: http://localhost:8000/api/login/account?token%20=%20123
请求方法: POST
状态代码: 404 Not Found

版本：ant-design-pro@6.0.0

💻 部署代码 node run_server.js

const express = require('express');
const app = express();
const path = require('path');

// 使用path.join获取绝对路径
const buildPath = path.join(__dirname, 'dist');
app.use(express.static(path.join(__dirname, 'dist')));

app.get('/*', function (req, res) {
    res.sendFile(path.join(__dirname, 'dist', 'index.html'));
});

const port = process.env.PORT || 3000;
app.listen(port, () => {
    console.log(`Server started on http://localhost:${port}`);
});

💻 proxy.ts

export default {
  test: {
    // localhost:8000/api/** -> https://preview.pro.ant.design/api/**
    '/api/': {
      target: 'https://proapi.azurewebsites.net',
      changeOrigin: true,
      pathRewrite: { '^': '' },
    },
  },
  pre: {
    '/api/': {
      target: 'your pre url',
      changeOrigin: true,
      pathRewrite: { '^': '' },
    },
  },
};

💻 config.ts

// https://umijs.org/config/
import { defineConfig } from '@umijs/max';
import { join } from 'path';
import defaultSettings from './defaultSettings';
import proxy from './proxy';
import routes from './routes';
const { REACT_APP_ENV = 'dev' } = process.env;
export default defineConfig({
  history: { type: 'hash' }, // 默认是 browser
  hash: true,
  routes,
  theme: {
    // 如果不想要 configProvide 动态设置主题需要把这个设置为 default
    // 只有设置为 variable， 才能使用 configProvide 动态设置主色调
    'root-entry-name': 'variable',
  },
  ignoreMomentLocale: true,
  proxy: proxy[REACT_APP_ENV as keyof typeof proxy],
  fastRefresh: true,
  model: {},
  initialState: {},

  title: 'AntDesign',
  layout: {
    locale: true,
    ...defaultSettings,
  },

  moment2dayjs: {
    preset: 'antd',
    plugins: ['duration'],
  },

  antd: {},

  request: {},

  access: {},

  headScripts: [
    // 解决首次加载时白屏的问题
    {
      src: '/scripts/loading.js',
      async: true,
    },
  ],
  //================ pro 插件配置 =================
  presets: ['umi-presets-pro'],

  openAPI: [
    {
      requestLibPath: "import { request } from '@umijs/max'",
      // 或者使用在线的版本
      // schemaPath: "https://gw.alipayobjects.com/os/antfincdn/M%24jrzTTYJN/oneapi.json"
      schemaPath: join(__dirname, 'oneapi.json'),
      mock: false,
    },
    {
      requestLibPath: "import { request } from '@umijs/max'",
      schemaPath: 'https://gw.alipayobjects.com/os/antfincdn/CA1dOm%2631B/openapi.json',
      projectName: 'swagger',
    },
  ],
  mfsu: {
    strategy: 'normal',
  },
  esbuildMinifyIIFE: true,
  requestRecord: {},
});

🚑 报错截图

Answer 1

引自免费微信小程序：皆我百晓生

看起来你在尝试部署一个基于 Ant Design Pro 的应用，并且在部署后的环境中遇到了登录功能失效的问题，返回了 404 错误。这是一个常见的跨域问题，因为开发环境和生产环境的 API 地址不同。下面是一些可能的解决方案：

1. 检查生产环境的代理配置： 确保你的生产环境代理（proxy）配置正确地将 /api 路由转发到预期的目标服务器。这应该在你的 Node.js 后端服务器中完成，例如你提供的Express应用示例。检查这个部分是否指向正确的线上API地址，而不是开发环境的地址。

const express = require('express');
const app = express();
const path = require('path');

const buildPath = path.join(__dirname, 'dist');
app.use(express.static(path.join(__dirname, 'dist')));

app.get('/*', function (req, res) {
    res.sendFile(path.join(__dirname, 'dist', 'index.html'));
});

// 确保这里的target是你线上API的地址
const targetUrl = 'https://your-production-api-url.com'; // 替换为实际的线上API地址
const port = process.env.PORT || 3000;

app.use('/api', function (req, res, next) {
  req.url = req.url.replace(/^\/api/, '');
  req.headers.host = targetUrl; // 设置host头，解决某些服务器的跨域问题
  return appProxy.web(req, res, { target: targetUrl });
});

app.listen(port, () => {
    console.log(`Server started on http://localhost:${port}`);
});

1. 检查前端的 proxy 配置： 确认前端的 UmiJS 配置中的 proxy 部分也正确配置了生产环境的代理。这通常位于项目的 umi.config.js 文件中。

// umi.config.js
import { defineConfig } from '@umijs/max';

...

export default defineConfig({
  ...
  proxy: {
    '/api': {
      target: 'https://your-production-api-url.com', // 替换为实际的线上API地址
      changeOrigin: true,
      pathRewrite: { '^/api': '' },
    },
  },
  ...
});

1. 清理缓存并重新部署： 有时，浏览器缓存可能会导致问题。确保清理浏览器缓存，并且在部署新版本的应用后，从一个新的浏览器窗口或隐私模式下打开应用，以避免旧的缓存影响。

2. 检查服务器日志： 查看服务器日志，看看是否有更多关于 404 错误的上下文信息，这可以帮助确定问题所在。

3. 检查API接口： 确认线上API服务器上是否存在 /api/login/account 这个接口，以及它是否正确处理 POST 请求。

通过以上步骤，你应该可以解决登录功能在生产环境中返回 404 错误的问题。如果问题仍然存在，请提供更多的错误信息或者日志，以便进一步排查。