Axios 调用无法在生产环境中使用 localhost答案

【问题标题】：Axios calls not working with localhost in productionAxios 调用无法在生产环境中使用 localhost
【发布时间】：2019-02-11 19:09:53
【问题描述】：

我的标题说明了我的问题，但我实际上是在寻找最佳实践。在我当前的项目中，我使用 vue.js 应用程序调用我在同一个盒子上运行的 nodejs 服务器。在开发中，我只是将 http://localhost/api/etc.... 硬编码到我的 axios 调用中，并认为因为我在生产中部署两者也可以在同一个盒子上运行，这很好，但是一旦我部署，我开始为 axios 调用获取 404 .我不得不重构我的代码以使用服务器的实际 dns 名称。

正因为如此，它现在可以工作了，但我觉得我错过了一些东西。我不确定是节点（用于 api 服务器）还是 apache（托管前端）问题。

处理网址的最佳方式是什么？

【问题讨论】：

我已经可以设想让我的生活更简单一些，比如创建一个 url 变量，所以我只需要在一个地方进行更改（一开始就应该这样做，但只是在这个项目）。但是，我仍然觉得我缺少一些东西。

标签： node.js vue.js axios

【解决方案1】：

通常人们会创建一个模块来导出带有baseUrl 的自定义axios 实例。我认为这是一个很好的做法，因为您可以仅使用相对 url 调用端点，并将 api url 集中在一个地方，从而更容易在 development 和 production url 之间切换。

my-api-client.js

import axios from 'axios';

export const MyApiClient = axios.create({
  baseURL: 'https://some-domain.com/api/',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});

app.js

import { MyApiClient } from './my-api.js';

MyApiClient.get('my-collection').then(...

如果您的javascript版本不支持import和export语句，您可以分别使用require和module.exports。

【讨论】：

谢谢！我假设 .get 调用中的“我的集合”代表我想在 baseURL 上命中的端点？
我喜欢这个解决方案，但可能会从baseURL 中去掉尾部斜杠以进行澄清，特别是如果您需要调用/。
@i-- axios 修剪正斜杠以将baseUrl 与relativeUrl 结合起来，所以这并不重要。