如何在使用Azure API-Management运行React时配置REST Urls？

Question

我有一个reactjs前端，它通过rest调用从spring boot后端获取数据。

在本地运行时，代码如下所示：

axios.defaults.baseURL = 'http://localhost:8080/api';

axios.get('/devices').then((resp) => {
  this.setState({devices: resp.data});
}).catch(() => {
  console.log('Failed to retrieve device details');
});

当我构建使用npm run build部署的代码时，我仍然使用localhost作为url。

我如何构建它，以便在本地使用localhost开发它，但部署它使用不同的url？

一旦我在Azure中，我将有一个前端和多个后端，需要根据登录的人指向这些后端。

如何配置API管理层，以根据登录人员(使用AD进行身份验证)将调用路由到正确的后端？

由于我使用APIM进行路由，那么baseURL应该是什么？

Answer 1

在配置文件中管理这些变量，并根据环境进行加载。

可以直接在配置文件中对局部变量进行硬编码的局部值

生产值-保留占位符并将其从构建管道中设置或硬编码

例如：

config.js

const serverVars = {
  authUrl: '#{authUrl}#',
  apiUrl: '#{apiUrl}#',
};

const localVars = {
  authUrl: 'local_auth_url',
  apiUrl: 'local_api_url',

};

export function getConfiguration() {
  if (process.env.NODE_ENV === 'production') {
    return serverVars;
  }

  return localVars;
}

在调用apiUrl时

import axios from 'axios';
import { getConfiguration } from 'config';

axios.defaults.baseURL = getConfiguration().apiUrl;

Answer 2

一种方法是使用环境变量。您可以根据环境变量使用不同的url。另一种方法是从基本url中删除域名，但只有当你的后端和前端域名和端口相同时，这才会起作用。