Ant-design-pro: Best practice for configuring server side api config

[WillBlacc]

Hi,

What is the best way to configure a server side API endpoint. For development /api routes to the default localhost:8000/api. I want to run a development build but point all api's in src/services to the production endpoint. The proxy config option does not seem to work anymore in v2.

[chenshuai2144]

https://github.com/ant-design/ant-design-pro/blob/master/config/config.js#L75

you can look this.

[WillBlacc]

Thank you, seems like I got it working.

[jvcjunior]

Thank you, seems like I got it working.

How @WillBlacc ?

[WillBlacc]

It is a little bit of trial and error since there is no feedback/errors when you get it wrong. Check these 4 things:

1. Your proxy config can not be the same as the mock config. For example:

proxy: {
    '/api/currentUser': {
      target: 'http://preview.pro.ant.design/',
      changeOrigin: true,
    },
  },

will not work since the mock api points to http://localhost:800/api/currentUser as well as the proxy url http://preview.pro.ant.design/api/currentUser. Do at least the following so you will have a (rooturl}//api/currentUser and {rooturl}/currentUser

proxy: {
    '/api/currentUser': {
      target: 'http://preview.pro.ant.design/',
      changeOrigin: true,
      pathRewrite: { '^/api': '' },
    },
  },

See here. To quote "As long as the proxy and mock url are different, they can be used at the same time."

1. The url of the proxy still points to the original url in the browser, only the underlying request/fetch forwards it. See here and here . To quote "The proxy is just a service request proxy. This address will not change. "

2. You need to run npm run start:no-mock to prevent umi from routing to the mock data.

3. Make sure changeOrigin: true and play with secure=false if you have a secure api endpoint and your test endpoint is not (not sure about this).

[vaibhavhrt]

How to set up api endpoint for Production?
Even with proxy it tries to fetch http://www.example.com/api/user/login