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");
   
......
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章