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

最新推荐文章于 2024-08-24 09:07:37 发布

原创最新推荐文章于 2024-08-24 09:07:37 发布 · 5.3k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#reactjs

umi request 同时被 2 个专栏收录

1 篇文章

订阅专栏

ant design pro

1 篇文章

订阅专栏

本文指导如何在AntDesignPro的dev环境中修改API地址，并介绍如何自定义请求，包括配置proxy、更改Content-Type、使用umi-request拦截器。还涵盖了关键词如API配置、请求封装和后端集成。

修改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.youkuaiyun.com/weixin_41753520/article/details/98317567
https://www.jianshu.com/p/2bb4e38b57c6