Heroku 服务器 api 调用（本地主机）不工作

Question

我正处于 Web 应用程序的最后阶段，我正在尝试使用 Heroku 部署它。后端非常简单，只使用 express，在我编写代码时，一个简单的本地主机服务器在登录时创建令牌 (localhost:8080/login)。不幸的是，在 Heroku 上，登录和令牌生成将不起作用，除非我正在使用我的计算机并且我的终端中已经有运行节点 server.js。也不确定是否需要此上下文，但在本地，我的反应应用程序在 localhost:3000 启动，而服务器是 localhost:8080/login。我听说我应该将它们都更改为相同的本地主机，并对 url 进行一些细微的更改，但到目前为止没有任何效果。我需要对下面的相关代码进行哪些更改，以便 Heroku 将使用自己的服务器进行 api 调用？


const express = require('express');
const cors = require('cors');
const app = express();

app.use(cors());
app.use('/login', (req, res) => {
    res.send({
      token: 'test123' // simple test send token
    });
  });

  app.listen(8080, () => console.log('API is running on http://localhost:8080/login'));

Server.js（我必须运行 npm start，Ctrl+C，然后节点server.js 为了正确登录)

import React, { useState } from 'react';
import PropTypes from 'prop-types';
import './Login.css';

async function loginUser(credentials) {
 return fetch('http://localhost:8080/login', {
   method: 'POST',
   headers: {
     'Content-Type': 'application/json'
   },
   body: JSON.stringify(credentials)
 })
   .then(data => data.json())
}

export default function Login({ setToken }) {
  const [username, setUserName] = useState();
  const [password, setPassword] = useState();

  const handleSubmit = async e => {
    e.preventDefault();
    const token = await loginUser({
      username,
      password
    });
    setToken(token);
  }

  return(
    <div className="login-wrapper">
      <h1>Please Log In</h1>
      <form onSubmit={handleSubmit}>
        <label>
          <p>Username</p>
          <input type="text" onChange={e => setUserName(e.target.value)} />
        </label>
        <label>
          <p>Password</p>
          <input type="password" onChange={e => setPassword(e.target.value)} />
        </label>
        <div>
          <button type="submit">Submit</button>
        </div>
      </form>
    </div>
  )
}

Login.propTypes = {
  setToken: PropTypes.func.isRequired
};

将生成令牌的登录组件

Answer 1

这是因为您的 Heroku 应用程序的本地主机未指向您的服务器应用程序。

解决这个问题最直接的方法是在 Heroku 上也发布您的服务器应用程序，然后更改您的函数 loginUser 以指向 URL 到您的服务器应用程序的 Heroku URL.您稍后可以重构 URL 以引用环境变量，以便在本地开发和推送到 Heroku 时代码更改为零。在这种情况下，这个 deploy guide 可能会派上用场。

如果您出于任何原因不打算在 Heroku 上发布您的服务器应用程序，您也可以在本地计算机上启动您的服务器并通过 ngrok 公开它，但您需要重构现在获取 URL，因为每次启动时 ngrok 都会有不同的 URL。

Heroku 服务器 api 调用（本地主机）不工作

Heroku server api call (localhost) not working

heroku

node.js