鍍金池/ 問答/HTML5  Linux  HTML/ ant-design-pro 如何使用本地服務器api，不使用mock

ant-design-pro 如何使用本地服務器api，不使用mock

ant-design-pro中使用了mock，我想不使用mock，測試我本地用nodejs起的api服務器。

我在.roadhogrc.mock.js中禁掉了mock

// 是否禁用代理
// const noProxy = process.env.NO_PROXY === 'true';
const noProxy = true

保存并刷新網(wǎng)頁，發(fā)現(xiàn)mock的數(shù)據(jù)確實沒了。然后我在ant-design-pro的package.json中加入了

"proxy": "http://localhost:9000",

以前我用create-react-app也是這么做的，只要node起一個監(jiān)聽9000端口的服務器就可以調(diào)試api了，但是在ant-design-pro中這么做好像行不通，fetch的時候總是404。

正常情況如下，這是我用create-react-app訪問的，create-react-app監(jiān)聽的3000，使用proxy訪問的本地9000端口：

clipboard.png

clipboard.png
可以看出是create-react-app訪問成功了

ant-design-pro的情況如下，ant-design-pro監(jiān)聽的8001端口，也使用proxy訪問的本地9000端口：
clipboard.png

clipboard.png
ant-design-pro請求失敗了，我保證api沒錯，api測試如下。

clipboard.png
請問我該如何使用本地服務器api，而不使用mock。
感謝大神們幫忙！??！

回答
編輯回答
薄荷糖

@羊德超 可否部分mock部分走真實的？

2018年5月29日 13:29
編輯回答
司令

const noProxy = (process.env.NO_PROXY === 'true');
'GET /api/currentUser': {

$desc: "獲取當前用戶接口",
$params: {
  pageSize: {
    desc: '分頁',
    exp: 2,
  },
},
$body: {
  name: 'Serati Ma',
  avatar: 'https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png',
  userid: '00000001',
  notifyCount: 12,
},

},
...
export default (noProxy
? { "/*": "http://test.servcer.com" }
: delay(proxy, 1000));

這樣配置后請求還是發(fā)送到localhost:8080怎么辦

2017年5月23日 02:44
編輯回答
吢丕

代理可以跨域嗎？？我
export default noProxy ? {
'GET /api/(.*)': apiurl+'/api/',
'POST /api/(.*)': apiurl+'/api/',
} : delay(proxy, 1000); 寫的，還是報404，求解？？？

2018年9月9日 17:19
編輯回答
何蘇葉

正確姿勢！！.roadhogrc.mock.js

// 是否禁用代理
// const noProxy = process.env.NO_PROXY === 'true';
const noProxy =true;
const apiurl="http://192.168.1.204:8800";
export default noProxy ? {
  'GET /api/(.*)': apiurl+'/api/',
  'POST /api/(.*)': apiurl+'/api/',
} : delay(proxy, 1000);
2017年4月5日 05:43
編輯回答
幼梔

直接把package.json里的proxy去掉，把你要訪問的api地址寫成localhost:9000/url

2017年11月22日 07:24
編輯回答
笑浮塵

還是讓老子自己來回答吧，ant-design-pro的官方文檔里有

不過文檔是有問題的，官方guihub的issue里也有很多人踩了這個坑，解決方法如下：

官方文檔說這樣修改就可以了
// .roadhogrc.mock.js
export default {
  'GET /api/*': 'https://your.server.com/api/',
};
測試后行不通，應改為如下
export default {
  'GET /api/*': 'https://your.server.com/',
};
api可能路徑不一定這么單一，進一步修改如下
export default {
  '/*': 'https://your.server.com/',
};

直接這么寫有些粗暴，萬一以后想用mock還得手動改回來，實際上官方已經(jīng)做了啟動命令了。

// .roadhogrc.mock.js
const noProxy = (process.env.NO_PROXY === 'true');
...
export default noProxy ? {} : delay(proxy, 1000);
意思是如果環(huán)境變量NO_PROXY是true，那么就不實用代理

如果直接啟動項目：npm start，那么NO_PROXY就是false，這樣啟動就可以了：npm start:no-proxy

可以看到package.json中有如下啟動腳本：
"start": "roadhog server",
"start:no-proxy": "cross-env NO_PROXY=true roadhog server"

那么上面那句三目運算就導出了{},只要把重定向的域名寫進去就好了，如下：

export default (noProxy
  ? { "/*": "https://your.server.com/" }
  : delay(proxy, 1000));

2018-8-28 補充：

隔了很久回來看貼，看到有部分朋友仍然沒成功，貼一下我實際的代碼

export default (noProxy ? {
  'POST /lazer/*': 'http://localhost:7001/',
  'GET /download/*': 'http://localhost:7001/',
} : delay(proxy, 1000));
2018年7月8日 14:27