Axios Api 在 Heroku 中调用

Question

我已将我的应用程序部署到 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}!`);
});

Answer 1

您实际上可以完全删除 baseUrl 选项并仅使用相对 URL“/api/saveClient”。这将适用于您的开发和生产环境。当您使用相对 url 时，axios 将默认为 http://你的应用程序名称.herokuapp.com/api/saveClient.

但是，如果您必须明确显示 baseUrl，则合适的 baseUrl 应该是： http://你的应用名称.herokuapp.com。为避免对此进行硬编码，您可以尝试类似的方法：

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

Heroku 允许您在其控制台 dashboard.heroku.com/apps/your-app-name/settings 中以简单的方式设置环境变量。我认为您不需要这个，但是随着您的应用程序的增长以及您希望更轻松地配置生产环境，知道这一点是件好事。

Answer 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"

Axios Api 在 Heroku 中调用

Axios Api calls in Heroku

javascript

heroku

reactjs

axios