Ant Design Pro 跨域及代理 mock 及 Ant Design Pro 2.x 版本的坑

最新推荐文章于 2025-07-07 15:58:39 发布

颓废老板

最新推荐文章于 2025-07-07 15:58:39 发布

阅读量1.6w

点赞数 2

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/yuliyige/article/details/82732416

本文介绍了AntDesignPro中出现的跨域问题及其解决方法。针对AntDesignPro2.x版本，详细讲解了如何通过配置代理解决跨域问题，并提到了缓存导致的问题及解决思路。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Ant Design Pro 跨域请求会出现如下错误:

Request URL: http://192.168.180.81:30002/apiv2/admin/auth
Request Method: OPTIONS
Status Code: 401 Unauthorized
Remote Address: 192.168.180.81:30002
Referrer Policy: no-referrer-when-downgrade

明明是用 POSt 请求, 却变成了 OPTIONS, 这是因为跨域的情况下, 会先发送一个 OPTIONS 请求去查询, 根本一个问题就要解决跨域即可.

参考:

http://www.ruanyifeng.com/blog/2016/04/cors.html

如何解决跨域呢 ?

Ant Design Pro 2.x 版本已经不用 .roadhogrc.mock.js 文件了, 那代理应该何如设置呢 ? 官方文档只讲有 mock 伪造数据, 没有讲如何设置代理. 因为它底层使用了 UniJS, 应该在它的文档里找.

找到了这里 https://umijs.org/zh/config/#proxy

按照说明, 在 config/config.js 文件里添加代理即可自动代理:

// 注意: 这里改成自己的实际地址 
 proxy: {
    '/apiv2': {
      'target': 'http://192.168.180.81:30002/',
      'changeOrigin': true,
    },
  },

缓存导致的坑

2.0 版本 request.js 中对频繁调用的接口会做了缓存, 所以当频繁访问时 , 会出现一些问题, 比如登录后马上退出, 退出后马上登录, 它直接拿前端缓存, 导致登录状态和系统不同步.

这是看后端的请求才看出来的.... 根本没有请求, 想了好久才记起来.

// src\utils\request.js 中有这么一段代码
 return fetch(url, newOptions)
    .then(checkStatus)
    .then(response => cachedSave(response, hashcode))   // 这个 Cache 把我害惨了 ...
    .then(response => {
...................

就是 cacheSave 方法, 保存了缓存, 直接注释掉.