部署 Ant-Design-Pro 后不调用 api

Question

I'm relatively new in this environment. I use "Ant design pro 4" with React and Typescript for a new project.

The proyect calls the api perfectly in dev, pre, or test. But once I run 'npm run build' to deploy, the api calls are getting this response .

I'm running the deployment in two different servers(ngnix and express) following the Ant-Design-Pro documentation . just to make sure that the configuration of it wasn't the root of the wrong response. But in both cases I'm getting the same wrong response.

my configuration for the ngnix server is:

server {
    listen 5000;
    # gzip config
    gzip on;
    gzip_min_length 1k;
    gzip_comp_level 9;
    gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
    gzip_vary on;
    gzip_disable "MSIE [1-6]\.";

    root <location of the generated folder dist>;

    location / {
        # 用于配合 browserHistory使用
        try_files $uri $uri/ /index.html;

        # 如果有资源，建议使用 https + http2，配合按需加载可以获得更好的体验
        # rewrite ^/(.*)$ https://preview.pro.ant.design/$1 permanent;

    }
    location /api {
        proxy_pass <ip of my API>;
        proxy_set_header   X-Forwarded-Proto $scheme;
        proxy_set_header   Host              $http_host;
        proxy_set_header   X-Real-IP         $remote_addr;
    }
}

my configuration for the express server is:

const express = require('express')
const app = express()
const port = 3000
var path = require('path')

app.use(express.static(path.join(__dirname, 'build')));

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

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`)
})

my config.ts is:

// https://umijs.org/config/
import { defineConfig, utils } from 'umi';
import defaultSettings from './defaultSettings';
import proxy from './proxy'; 
import webpackPlugin from './plugin.config';
// const { winPath } = utils; // preview.pro.ant.design only do not use in your production ;
// preview.pro.ant.design 专用环境变量，请不要在你的项目中使用它。

const { REACT_APP_ENV, GA_KEY } = process.env;
const api = 'http://xxx.xxx.1.12';//api ip address

export default defineConfig({
  history: { type: 'hash' }, // 默认是 browser
  hash: true,
  antd: {},
  analytics: GA_KEY
   ? {
      ga: GA_KEY,
     }
   : false,
  dva: {
   hmr: true,
  },
  locale: {
    //default: 'zh-CN',

    default: 'en_US',
    // default true, when it is true, will use `navigator.language` overwrite default
    baseNavigator: true,
  },
  dynamicImport: {
   loading: '@/components/PageLoading/index',
  },
 targets: {
   ie: 11,
  },
  // umi routes: https://umijs.org/docs/routing
  routes: [
   {
    <my routes>
   }
 ],
 // Theme for antd: https://ant.design/docs/react/customize-theme-cn
 theme: {
   // ...darkTheme,
   'primary-color': defaultSettings.primaryColor,
 },
 define: {
   REACT_APP_ENV: REACT_APP_ENV || '',

 },
 ignoreMomentLocale: true,
 lessLoader: {
   javascriptEnabled: true,
 },
 cssLoader: {
   modules: {
     getLocalIdent: (
       context: {
         resourcePath: string;
       },
       _: string,
       localName: string,
     ) => {
      if (
         context.resourcePath.includes('node_modules') ||
         context.resourcePath.includes('ant.design.pro.less') ||
         context.resourcePath.includes('global.less')
       ) {
         return localName;
       }

    // const match = context.resourcePath.match(/src(.*)/);

    // if (match && match[1]) {
    //   const antdProPath = match[1].replace('.less', '');
    //   const arr = winPath(antdProPath)
    //     .split('/')
    //     .map((a: string) => a.replace(/([A-Z])/g, '-$1'))
    //     .map((a: string) => a.toLowerCase());
    //   return `antd-pro${arr.join('-')}-${localName}`.replace(/--/g, '-');
    // }

    return localName;
  },
},
 },
 manifest: {
   basePath: '/',
 },
proxy:  proxy: {
'/countries': {
  target: `${api}/admin/countries`,
  changeOrigin: true,
  pathRewrite: { '^/countries': '' },
},
 chainWebpack: webpackPlugin,
  });

I have the feeling is a problem in the building process which is made by 'umi build', I tried to attach my self to the documentation. Any suggestion?

Answer 1

I've been suffering with same problem. I was calling like

request('/api/login/account', {
  method: 'POST',
  data: params,
});

And It is valid when environment is not production because domain name was prefixed by /config/proxy.ts setting as below.

  dev: {
    '/api/': {
      target: 'https://localhost:44357',
      secure: false,
      changeOrigin: false,
      pathRewrite: { '^': '' },
    },
  },

But proxy.ts is not available in production environment. So I found 2 ways to replace proxy.ts in production.

1. Use extend of umi-request.
2. Use interceptors of umi-request.

To use extend, I have to change request source from '@/utils/request' to 'umi-request' as following.

import request from '@/utils/request'; // New
// import request from 'umi-request'; // Old

And have to extend in /src/utils/request.ts as following.

const request = extend({
  prefix: 'https://localhost:44357', // Prefix this to every API call
  errorHandler, // 默认错误处理
  credentials: 'include', // 默认请求是否带上cookie
});

But replacing many import was tough for me. So I used interceptors to prefix URL as following.

I enabled interceptors when current environment is production. But proxy.ts can be useless if I check for development environment also and use another URL for development.

// /src/global.tsx

if (process.env.NODE_ENV === 'production') {
  request.interceptors.request.use((url, options) => {
    return {
      url: `https://localhost:44357${url}`,
      options: { ...options, interceptors: true },
    };
  });
}

Answer 2

As @doctorgu mentioned, interceptors are a good way to solve this. Following worked for me in src/global.tsx

// https://github.com/umijs/umi-request
request.interceptors.request.use(
  (url, options) => {
        return {
      url: `${URL}${url}`,
      options: { ...options, interceptors: true },
    };
  },
  { global: true }
);

where URL is defined in.env file

url=http://localhost:8000
PORT=8000

in config.ts:

const { REACT_APP_ENV , PORT,url} = process.env;

export default defineConfig({
 define: {
    REACT_APP_ENV: REACT_APP_ENV || '',
        PORT: PORT || 8000,
        URL: url || ''
  },
...
})