美文网首页
Ant design 项目 proxy post请求 504 问

Ant design 项目 proxy post请求 504 问

作者: 蜡笔丶超人 | 来源:发表于2018-08-23 17:24 被阅读1086次

    预期的与服务端交互

    根据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问题。希望有大佬指点一波

    相关文章

      网友评论

          本文标题:Ant design 项目 proxy post请求 504 问

          本文链接:https://www.haomeiwen.com/subject/dhemiftx.html