首页 > 解决方案 > Heroku 将“未定义”添加到 BASE_URL 环境变量

问题描述

尝试部署一个 vuejs,将应用程序快速部署到 heroku。该应用程序显示,但无法访问 api,因为 heroku 似乎在 base_url 中间添加了“未定义”。一切都按预期在本地工作。

这是我的heroku配置变量: BASE_URL: https://goore-todos.herokuapp.com/

这是 Vuejs 组件 api 请求:

fetchTodo () {
  let uri = process.env.BASE_URL + '/api/all';
  axios.get(uri).then((response) => {
    this.todos = response.data;
  });
},

如前所述,这在本地有效。

控制台显示以下错误:VM71:1 GET https://goore-todos.herokuapp.com/undefined/api/all 404 (Not Found)

视图是空的。

通过 Postman向https://goore-todos.herokuapp.com/api/发出的请求按预期工作。

标签: expressherokuenvironment-variablesaxiosbase-url

解决方案


在这种情况下,看起来 process.env.BASE_URL 是未定义的。由于未定义,因此您尝试访问的 url 被认为是相对的。这意味着它使用您当前的域并将路径附加到它。

如果您的前端和后端在同一个域上运行,则没有理由尝试将 API url 作为变量传递,因为您可以使用相对 URL。

如果您想通过环境变量访问 URL,那么使用前端应用程序会有点棘手。Vue 应用程序在用户的浏览器上运行,而不是在您的服务器上,因此您无法直接访问它。


推荐阅读