使用 Azure API 管理运行 React 时如何配置 REST URL？答案

【问题标题】：How Do I Configure REST Urls When Running React With Azure API-Management?使用 Azure API 管理运行 React 时如何配置 REST URL？
【发布时间】：2019-12-02 22:59:28
【问题描述】：

我有一个 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 应该是什么？

【问题讨论】：

标签： reactjs azure rest axios

【解决方案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;

【讨论】：

【解决方案2】：

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

【讨论】：