Axios Api 在 Heroku 中调用答案

【问题标题】：Axios Api calls in HerokuAxios Api 在 Heroku 中调用
【发布时间】：2017-11-07 17:47:25
【问题描述】：

我已将我的应用部署到 heroku，并将其连接到 mongoLab。我的问题是我使用 axios 的 API 调用不适用于 Heroku，因为它们仍然是在本地设置的。是否有一个动态环境变量我必须用它替换 baseURL 才能工作？我试着研究这个没有运气。

见下面的代码

export default {


  saveClient: function(clientData) {
    return axios({
method:"post",
url:"/api/saveClient",
baseURL:"http://localhost:3001",
data:clientData
    })

  }

----------------------
server.js is below



const express = require("express");
const bodyParser = require("body-parser");
const mongoose = require("mongoose");
const app = express();
const PORT = process.env.PORT || 3001;
const cors = require("cors")
app.use(cors())
// Configure body parser for AJAX requests
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
// Serve up static assets
app.use(express.static("client/build"));

var apiRoutes = require("./controllers/clientController.js");
var validatorRoutes = require("./controllers/validatorRoutes.js")
app.use("auth",validatorRoutes)
app.use("/api", apiRoutes);
mongoose.Promise = global.Promise;
// Connect to the Mongo DB
mongoose.connect(
  process.env.MONGODB_URI || "mongodb://skillBuilder:qwerty123@ds143707.mlab.com:43707/heroku_2s9vp225",
  {
    useMongoClient: true
  }
);

// Start the API server
app.listen(PORT, function() {
  console.log(`????  ==> API Server now listening on PORT ${PORT}!`);
});

【问题讨论】：

看看Heroku Configuration Vars。
heroku 中的配置变量？
@BrettDeWoody 哇，我只是在看那个，你回复了谢谢，我会的

标签： javascript reactjs heroku axios

【解决方案1】：

您实际上可以完全删除 baseUrl 选项，而只使用相对 URL '/api/saveClient'。这将适用于您的开发和生产环境。当您使用相对 url 时，axios 将默认为 http://your-app-name.herokuapp.com/api/saveClient.

但是，如果您必须明确 baseUrl，则适当的 baseUrl 将是： http://your-app-name.herokuapp.com。为避免硬编码，您可以尝试以下操作：

baseUrl = process.env.baseURL || "http://localhost:3001"

Heroku 让您可以在dashboard.heroku.com/apps/your-app-name/settings 的控制台中轻松设置环境变量。我不认为你会需要这个，但是随着你的应用程序的增长并且你想要更轻松地配置你的生产环境，这是很好的。

【讨论】：

感谢您的回复@Jeffrey Kandel，我尝试删除 baseURL，但仍然无法正常工作。想补充一点，我正在使用 React，因此页面的路由完全发生在前端。因此，当我尝试使用相对 URL 进行 api 调用时，它没有使用服务器端口路径等...当我手动更改 URL 时，我的 API 调用不起作用 --> your-app-name.herokuapp.com/api/saveClient。
我认为最好的调试方法是识别您的 API 正在响应的 URL，然后从它们开始反向工作。如果我理解正确，在本地运行时“localhost:3001/api/saveClient”会给您一个响应，但“your-app-name.herokuapp.com/api/saveClient”不能按预期工作。当您转到第二个 URL 时，您会得到什么响应？（您可以使用 Chrome 检查器的网络选项卡检查响应状态和任何消息）
是的，你是对的。当我在本地运行时，localhost:3001/api/saveClient" 可以工作，这是我添加特定 baseURL 的主要原因，因为如果不是这样，它会导致 React 路由的 localhost:3000/api/saveClient 原因。当我尝试“your- app-name.herokuapp.com/api/test”（我设置为测试）我得到“内部服务器错误”500，“your-app-name.herokuapp.com/api/saveClient”给了我 404。跨度>
嗯，这很难...如果您从 /api/test 获得 500，从 /api/saveClient 获得 404，听起来您正在访问服务器，但有一些 api 路由设置不正确。我会研究确定“your-app-name.herokuapp.com/api/...”形式的 URL 会返回一些始终成功的响应。如果你能找到，我们可以正确设置 axios。另外，react router 不应该改变站点的域，它应该只响应您在语句中设置的。你能解释更多关于 localhost:3000 和 :3001 的信息吗？
看起来，它的设置方式和我理解的方式是，一旦服务器启动并且根 / 被击中，REACT 路由器就会接管，它似乎确实以某种方式改变了域。所以我将端口从我的 server.js 更改为 3000 而不是 3001 以匹配 REACT 并且我的测试路由工作“your-app-name.herokuapp.com/api/test”。但是，当我使用 axios 时，它会在控制台中显示 XHR 加载失败：OPTIONS "localhost:3001/api/checkClient"。不知何故，它仍在使用本地主机/有什么想法吗？

【解决方案2】：

我只是这样做修复了我的：

exports.homeRoutes = (req, res) => {
  // make request to the /api/users
  //your-app.heroku.com/path/to/your/api
  axios
    .get("https://dashboard.herokuapp.com/api/users")
    .then(function (response) {
      res.render("index", { users: response.data });
    })
    .catch((err) => {
      res.send(err);
    });
};

在你的情况下，这个 hack 可能会起作用：

url:"your-app.herokuapp.com/api/saveClient"

【讨论】：