集成我的前端代码（Netlify）和我的后端代码（heroku）（CORS）的问题[关闭]

Posted 2023-03-04

【中文标题】集成我的前端代码（Netlify）和我的后端代码（heroku）（CORS）的问题[关闭]

【英文标题】：Problems integrating my front-end code (Netlify) and my back-end code (heroku) (CORS) [closed]

【发布时间】：2021-02-26 11:24:52

【问题描述】：

我已经做了一段时间的 React 应用程序，我想部署我的最新项目。问题是，在这个特定的应用程序中，我使用 API 密钥向电影数据库 API 发出请求。在确定我需要使用 .env 文件将其隐藏在后端（这是我以前从未做过的事情）之后，我使用我制作的 Express 服务器使其在我的机器上完美运行。当我想让这个东西上线时，我遇到了两个问题。

我将前端 (https://github.com/cavini/the-movie-app) 与后端 (https://github.com/cavini/the-movie-app-server) 分开。我在 Netlify 上托管了零问题的前端代码，但我无法让托管的前端网站向 Heroku 上的后端发出 GET 和 POST 请求。

我以前从未使用过 heroku，我不确定我是否完全理解它的工作原理。

这是我在尝试查看 Heroku 应用的外观时收到的消息。 Heroku deploy error? 我去日志上寻找答案，但我不明白它在说什么。 这是它的样子：Heroku log，Heroku log 2 我的问题是，我需要一个静态文件夹来在 heroku 上托管应用程序吗？如果是这样，我该怎么做？因为在前端，react 已经有一个构建命令可以这样做。另外，我也需要前端文件吗？

这是我的问题的第一部分。第二部分是我认为与 CORS 相关的部分。当我尝试从本地文件向本地后端代码发出请求时，它运行良好，但是当我尝试对托管在 Heroku 上的后端进行相同操作时，我在 Chrome 控制台上收到此消息。Access-Control-Allow-Origin header error.

以下是“网络”选项卡上的内容：Request details、Request details 2

我完全不知道这意味着什么和/或如何解决它。有人能解释一下吗？

【参考方案1】：

您可以通过 1 个 github 存储库在 heroku 上同时托管前端和后端，而不是尝试在 netlify 上托管前端和后端，这也将解决您在使用 Cors 时遇到的问题。

要在 Heroku 上同时托管前端和后端，您需要将两个文件夹放入 1 个目录中， 您还需要将类似这样的内容添加到您的主 express 文件中，该文件从前端文件中获取文件并显示它

（安装路径） npm i path,

const path = require('path')
app.use(express.static(path.join(__dirname, 'client/build')));

还有

app.get('*', (req, res) => 
  res.sendFile(path.resolve(__dirname, 'client', 'build', 'index.html'))

);

同时添加以下脚本供 Heroku 使用：

"scripts": 
    "start": "node index.js",
    "heroku-postbuild": "cd client && npm install && npm run build"
  ,

如果您还没有 Procfile，请创建一个 Procfile，因为您正在创建一个连接到端口的 Web 应用程序，您需要一个 Web Dyno，您的 Procfile 中只需要web: npm run start

还记得用给定的新 Heroku 链接替换请求 url。 例如，以前您的请求将从“https://example.com/api”获取，在 heroku 上托管并且您的前端和后端都在一起之后，您需要向“LinkGivenByHeroku/api”提出请求，

您收到“未能在 60 秒内绑定到 $PORT”错误的原因是 Heroku 并不总是能够为您提供所需的端口，它会选择一个开放端口并将其放入其 ENV，所以在哪里你放了这样的东西：

let port = 3001 
app.listen(port)

改成：

let port = process.env.PORT || 3001
app.listen(port)

【讨论】：

非常感谢 Arize，您的评论真的帮助了我。这实际上是我发现的唯一对我有用的解决方案。

我加载了主页/关于页面。但只有主要功能在起作用。当我尝试获取随机电影时，我从 API 获得的响应具有未定义的“数据”值。知道为什么吗？