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

Question

我在这个环境中相对较新。我将"Ant design pro4“与React和Typescript一起用于一个新项目。

proyect在dev、pre或test中完美地调用api。但是一旦我运行'npm run build‘来部署，api calls就会得到这个response。

我在Ant-Design-Pro documentation之后的两个不同的服务器(ngnix和express)上运行部署。只是为了确保它的配置不是错误响应的根源。但在这两种情况下，我都得到了相同的错误响应。

我对ngnix服务器的配置是：

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;
    }
}

我对express服务器的配置是：

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}`)
})

我的config.ts是：

// 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,
  });

我感觉是'umi build‘在构建过程中出现了问题，我试着把自己附在文档上。有什么建议吗？

Answer 1

我也有同样的问题。我打电话给你就像

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

当环境不是生产环境时，它是有效的，因为域名由/config/proxy.ts设置作为前缀，如下所示。

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

但proxy.ts在生产环境中不可用。因此，我找到了两种在生产环境中替代proxy.ts的方法。

使用umi-

• 的umi-request.

• Use拦截器的扩展。

要使用扩展，我必须将请求源从'@/utils/ request‘更改为'umi-request’，如下所示。

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

并且必须在/src/utils/request.ts中进行扩展，如下所示。

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

但是替换许多导入对我来说是困难的。所以我使用拦截器作为URL的前缀，如下所示。

当当前环境为生产环境时，我启用了拦截器。但是，如果我也检查开发环境并使用另一个网址进行开发，那么proxy.ts可能是无用的。

// /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

正如@doctorgu提到的，拦截器是解决这个问题的好方法。下面的代码在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 }
);

在.env文件中定义URL的位置

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

在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 || ''
  },
...
})