集成我的前端代码 (Netlify) 和我的后端代码 (heroku) (CORS) 的问题

Question

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

我分离了我的前端（https://github.com/cavini/the-movie-app) from my backend (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

我完全不知道这意味着什么and/or如何修复它。任何人都可以阐明这一点吗？

Answer 1

与其尝试在 netlify 上托管前端，在 heroku 上托管后端，您可以从 1 github 存储库在 heroku 上托管前端和后端，这也将解决您与 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，请创建一个，因为您正在创建一个连接到端口的 Web 应用程序，您将需要一个 Web Dyno，您的 Procfile 中只需要 web: npm run start

并且还记得用给定的新 Heroku link 替换请求 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)

集成我的前端代码 (Netlify) 和我的后端代码 (heroku) (CORS) 的问题

Problems integrating my front-end code (Netlify) and my back-end code (heroku) (CORS)

node.js

express

heroku

cors

get-request