预期的与服务端交互
根据ant-design-pro 文档显示,项目利用roadhogrc.mock.js 来mock数据或者proxy反向代理服务端请求。
export default noProxy ? {
'GET /api/(.*)': 'https://your.server.com/api/',
// 同理,我写了一个POST
'POST /api/(.*)': 'https://your.server.com/api/',
} : delay(proxy, 1000)
然后执行
npm run start:no-proxy
问题发现(post 504超时)
这时候我遇到了一个问题,在GET请求的时候,请求能够被实际转发。但是POST请求则会一直pending直到 504 ,node 报错
[HPM] Error occurred while trying to proxy request /Pub/Index/login from localhost:8000 to http://127.0.0.1:9000 (ECONNRESET) (https://nodejs.org/api/errors.html#errors_common_system_errors)
解决办法
百思不得其解,网上有各种类型的说法,但是没有找到好的解决方案。无奈之下,只能追本溯源去查看roadhog项目。
文档中写了对于webpack的配置,需要在根目录新建.webpackrc或者.webpackrc.js配置文件。把proxy配置在.webpackrc文件中如下所示
"proxy": {
"/api": {
"target": "http://jsonplaceholder.typicode.com/",
"changeOrigin": true,
"pathRewrite": { "^/api" : "" }
}
}
大功告成!
最后一个小tips,如果需要代理所有的请求,可以写成如下所示:
"proxy": {
// 注意这个 **
"**": {
"target": "http://xxx.com",
"changeOrigin": true
}
}
proxy配置参考
webpack使用http-proxy-middleware中间件。
总结
还是没有弄明白按照开始的流程,为什么post请求会出现504问题。希望有大佬指点一波