symfony - axios 中的动态主机

Question

如何在 axios 中创建动态主机?

示例:

 const host = location.hostname;
 // axios.defaults.baseURL = 'http://hastore.local';
 axios.defaults.baseURL = host;
 axios.defaults.port = 8080;
 axios.get('api/categories')
 .then((res) => {
      this.categories = res.data;
      console.log(res);
 })
 .catch((err) => {
      console.warn('error during http call', err);
 });

字符串 axios.defaults.baseURL = 'http://hastore.local';不适合，因为在生产中不起作用。

字符串 const host = location.hostname;也不是解决方案，因为我得到了不正确的端口和重复的主机。



目标是根据环境获得合适的宿主。
我阅读了很多关于此的文章，但没有找到解决方案。
感谢帮助!

axios 版本:例如:v0.16.2

环境:例如:node v8.9.4、chrome 64.0.3282.119、Ubuntu 16.04

Symfony 4.0.4

Vue.js 2.4.2

vue-axios 2.0.2

Answer 1

您可能不需要设置 baseURL。您是否尝试过在每次发出请求时都定义 baseURL？例如，

axios.get(`${host}:${port}/api/categories`)

或者，根据您的话“目标是根据环境获得正确的主机。”，您可以使用环境变量定义正确的主机，例如:

axios.get(`${proccess.env.HOST}:${PORT}/api/categories`)

如果您为前端代码使用捆绑器，则此表达式将被解析为

axios.get('http://example.com:80/api/categories')

那是因为您的打包器实际上应该使用预定义的环境变量运行 HOST和 PORT