Ant Design Pro V4 修改请求配置(api改为服务器地址 请求Content-Type改为form)

修改api地址

Ant Design Pro 如果 dev 环境要接入自己的服务端api，需要修改 config\proxy.ts 中的代理设置

原配置:

dev: {
    '/api/': {
      target: 'https://preview.pro.ant.design',
      changeOrigin: true,
      pathRewrite: { '^': '' },
    },
  },

修改配置：

dev: {
    '/api/': {
      target: 'https://www.baidu.com',
      changeOrigin: true,
      pathRewrite: { '^/api': '' },
    },
  },

此处一定要记得使用 pathRewrite 将 “api” 替换掉，不然请求URL会将其携带，导致404，也可以在请求Response Headers x-real-url 属性中验证

自定义请求

Ant Design Pro 自带页面 没有引用 utils/request.ts 中封装的请求对象(改了半天没起作用,自己还是不够仔细啊)

修改为

import request from '@/utils/request';

因为业务需要将请求 Content-Type 改为 application/x-www-form-urlencoded (默认是application/json)，所以需要对request文件做一些配置

umi-request 提供了方便的API 新增 requestType:‘form’ 即可
data 也不需要自己使用 JSON.stringify 或者 Qs.stringify 序列化

import { extend } from 'umi-request';
/**
 * 配置request请求时的默认参数
 */
const request = extend({
  errorHandler, // 默认错误处理
  credentials: 'include', // 默认请求是否带上cookie
  requestType:'form', 
  // headers:{
  //   'Content-Type':'application/x-www-form-urlencoded'
  // }
});
});

详尽的文档请参考 umi-request 官方文档

如果需要在请求前后做一些操作，可以使用拦截器 request.interceptors 作进一步封装

可以参考:
https://www.cnblogs.com/taxun/p/13546500.html
https://blog.csdn.net/weixin_41753520/article/details/98317567
https://www.jianshu.com/p/2bb4e38b57c6