ant design pro网络请求以及代理设置

ant design pro 官网：https://pro.ant.design/zh-CN

config/proxy.ts：

export default {
  dev: {
    '/api/': {
      // 要代理的地址
      target: 'http://test.crazyming.com',
      // 依赖 origin 的功能可能需要这个，比如 cookie
      changeOrigin: true,
      pathRewrite: { '^/api': '' },// 重写路径,这里将 /api/ 替换为了空  ：http://localhost:8000/api/** -> http://test.crazyming.com/**
    },
  },
};

关于配置生产环境的请求地址，没有在文档上找到最佳实践，issues上提供了一些方案：

https://github.com/ant-design/ant-design-pro/issues/1046

我这里暂时用请求拦截器进行处理

src/app.tsx:

/**
 * 生产环境修改为正确的api地址
 * @param url
 * @param options
 */
const modifyUrl = (url: string, options: any) => {

  let api = url;
  if (window.location.hostname!=='localhost'){
    const domain = `http://test.crazyming.com`;
    const temp = `${domain}${url}`;
    api = temp.replace(`${domain}/api`,domain);
  }
  return {
    url: api,
    options: { ...options, interceptors: true },
  };
};

requestInterceptors数组加入modifyUrl

export const request: RequestConfig = {
  errorHandler: () => {
    console.log('网络请求错误');
  },
  // 修改api url
  // header 添加AccessToken
  requestInterceptors: [modifyUrl,authHeaderInterceptor],
};