Axios调用不在生产中使用localhost

Question

我的标题说明了我的问题，但我实际上是在寻找最佳实践。在我当前项目的情况下，我正在使用vue.js应用程序调用我在同一个盒子上运行的nodejs服务器。在开发过程中，我刚刚将http://localhost/api/etc硬编码到我的axios调用中，因为我在生产中同时将它们部署在同一个盒子上，这样就可以了，但是一旦我部署了，我就开始获得404s的axios调用。我不得不重构我的代码以使用服务器的实际DNS名称。

它因此而起作用，但我觉得我错过了一些东西。我不确定它是一个节点（用于api服务器）还是apache（托管前端）问题。

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

Answer 1

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

我-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。