Ant-design-pro: 部署之后还是请求本地API

[Liqiankun]

💻 示例代码

config文件配置

  proxy: {
    '/api': {
      target: 'https://xcx-img.teamup.group:9000/api/',
      changeOrigin: true,
      pathRewrite: { '^/api': '' },
    },
  }

build之后部署错误如下。

部署之后请求为啥不是我target设置的地址？怎么设置才能访问我设置的地址？

[afc163]

https://github.com/ant-design/ant-design-pro/issues/5613
https://github.com/ant-design/ant-design-pro/issues/5022
https://github.com/ant-design/ant-design-pro/issues/2302

[afc163]

https://github.com/ant-design/ant-design-pro/issues/2779

[afc163]

https://github.com/umijs/umi/issues/1421#issuecomment-436546754

[Liqiankun]

@afc163 恩，我还是不知道怎么解决。

[chenshuai2144]

还可以看看这两篇
https://pro.ant.design/blog/proxy-cn
https://pro.ant.design/docs/deploy-cn

[Liqiankun]

@xiaohuoni

代理只是服务请求代理，这个地址是不会变的。
原理可以简单的理解为，在本地启了一个服务，你先请求了本地的服务，本地的服务转发了你的请求到实际服务器。所以你在浏览器上看到的请求地址还是http://localhost:8000/xxx 。以服务端是否收到请求为准

对于前端同学来说这个确实不好理解，解决方法是服务端需要设置，关键点如下，以我们为例。 更多请参考部署到不同的平台

location /api {
      proxy_pass https://ant-design-pro.netlify.com;
      proxy_set_header   X-Forwarded-Proto $scheme;
      proxy_set_header   Host              $http_host;
      proxy_set_header   X-Real-IP         $remote_addr;
  }

proxy_pass设置成真实服务器地址就可以了。

很多回答都是让你去看文档(对于做前端的同学真的摸不着头脑)，而不直接告诉你解决问题的方法，真的不太好，如果解决了你的问题给个👍，看看解决了多少人的问题。

这样才是回答问题。如果之前的回答指出关键点，这个问题还会被一遍又一遍提问吗？

[afc163]

@Liqiankun 欢迎来帮我们完善文档。

[Liqiankun]

@afc163 一点个人意见而已。😂

[ZidiHu]

@xiaohuoni

代理只是服务请求代理，这个地址是不会变的。
原理可以简单的理解为，在本地启了一个服务，你先请求了本地的服务，本地的服务转发了你的请求到实际服务器。所以你在浏览器上看到的请求地址还是http://localhost:8000/xxx 。以服务端是否收到请求为准

对于前端同学来说这个确实不好理解，解决方法是服务端需要设置，关键点如下，以我们为例。 更多请参考部署到不同的平台

location /api {
      proxy_pass https://ant-design-pro.netlify.com;
      proxy_set_header   X-Forwarded-Proto $scheme;
      proxy_set_header   Host              $http_host;
      proxy_set_header   X-Real-IP         $remote_addr;
  }

proxy_pass设置成真实服务器地址就可以了。

_很多回答都是让你去看文档(对于做前端的同学真的摸不着头脑)，而不直接告诉你解决问题的方法，真的不太好，如果解决了你的问题给个👍，看看解决了多少人的问题。_

这样才是回答问题。如果之前的回答指出关键点，这个问题还会被一遍又一遍提问吗？

Hi 朋友不好意思打扰你，我现在也碰到了这个问题试了很多不知道怎么解决。想请教一下你，你这里说要改的proxy_pass我没有在项目里找到，请问你是先用nginx部署，才会出来这个文件吗？（我目前改了config.js里的proxy，但还是无法连接服务器）
先谢谢你啦！

[Liqiankun]

@ZidiHu 这个文件和我们前端的项目没关系，这个让后台同学看一下就应该可以解决问题了。