预期的与服务端交互

根据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)

image.png

解决办法

百思不得其解，网上有各种类型的说法，但是没有找到好的解决方案。无奈之下，只能追本溯源去查看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问题。希望有大佬指点一波