Ant Design Pro 4.0 设置代理服务器

当前使用的版本为 Ant Design Pro v4.0.0
找到项目所在目录下的/config/config.ts 文件。
找到Proxy相关内容:

......
      if (match && match[1]) {
        const antdProPath = match[1].replace('.less', '');
        const arr = slash(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: '/',
  },
  chainWebpack: webpackPlugin,
  /*
  proxy: {
    '/server/api/': {
      target: 'https://preview.pro.ant.design/',
      changeOrigin: true,
      pathRewrite: { '^/server': '' },
    },
  },
  */
} as IConfig;

打开注释掉的内容,并做如下配置:

  proxy: {
     '/myserver/': 'http://localhost:8060/test/', 
     //只要是以 “/myserver ”开头的,都指向http://localhost:8060/test/

     //如果不想始终传递 /server ,则需要重写路径;方法如下:
     //只要前端调用的接口是以 /server/api/ 开头的,都指向http://localhost:8080/
    '/server/api/': {
      target: 'http://localhost:8080/',
      changeOrigin: true,
      pathRewrite: { '^/server': '' },
      //最终指向到的服务器地址是 "http://localhost:8080/api/ "
    },
  },

设置完成后,使用 npm start 启动服务即可。

调用代码如下:

......

   return request("/server/api/test");
   
......
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章