如何将Heroku部署的Node.js后端与Hostinger托管的前端连通配置

一、先修复后端代码的部署兼容问题 #

你当前的后端无响应90%是以下两个代码问题导致的：

1. 端口适配问题：Heroku会动态分配服务端口，不能写死5000，修改index.js的监听逻辑：

// 把原有app.listen("5000", ...)替换为以下代码
app.listen(process.env.PORT || 5000, () => {
    console.log("backend is running");
});

2. 跨域配置：前端托管在Hostinger、后端在Heroku属于跨域请求，需要开启CORS支持：

• 先执行安装命令：npm install cors
• 在index.js中添加配置，放在app.use(express.json())之前：

const cors = require("cors");
app.use(cors());

3. 补充注意：Heroku的文件系统是临时的，你当前multer配置的本地images目录存储的图片，在应用重启后会自动消失，后续如果需要持久存储图片建议对接云存储服务。

二、配置后端package.json适配Heroku部署 #

你需要在package.json中明确启动命令和Node.js版本，示例配置如下：

{
  "name": "blog-backend",
  "version": "1.0.0",
  // 新增engines字段，填写你本地开发用的Node.js版本，可执行node -v查询
  "engines": {
    "node": "16.x"
  },
  "scripts": {
    // 新增start字段，Heroku部署后会自动执行该命令启动服务
    "start": "node index.js",
    "dev": "nodemon index.js"
  },
  "dependencies": {
    // 你的原有依赖保持不变即可
  }
}

修改完成后将代码重新推送到GitHub，同步到Heroku。

三、配置Heroku环境变量与MongoDB访问权限 #

1. Heroku环境变量配置：你本地的.env文件不会同步到GitHub，需要在Heroku应用后台的「Config Vars」区域手动添加MONGO_URL变量，值和你本地.env中的MongoDB连接地址保持一致。
2. MongoDB IP白名单配置：登录MongoDB管理后台，进入网络访问设置，将允许访问的IP设置为0.0.0.0/0，否则Heroku的动态IP会被MongoDB拦截，导致无法拉取数据。

四、修改前端接口请求地址 #

所有前端代码中原本调用http://localhost:5000/xxx的接口，全部替换为你的Heroku应用域名，比如你Heroku应用的访问地址是https://my-blog-backend.herokuapp.com，那么请求用户列表的接口就改为https://my-blog-backend.herokuapp.com/api/users。
修改完成后将前端代码重新部署到Hostinger即可。

五、连通性验证 #

部署完成后先直接在浏览器地址栏输入https://你的Heroku应用域名/api/posts，如果能正常返回接口数据，说明后端部署正常，再测试前端页面的功能即可。

内容的提问来源于stack exchange，提问作者shashwat panda