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

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 方法, 保存了缓存, 直接注释掉.