Netlify / React 前端未连接到 Node.js / Express / MongoDB Atlas / Heroku 后端，但在开发/本地工作

Question

修复：在听取了一些建议后，我放弃了 setupProxy 并将完整的 API url 放入 axios 请求中。这引发了一个 cors 错误，因此我导入了 CORS 并将app.use(cors()) 添加到我的 index.js 中，并且当我重新部署应用程序时按预期运行

我第一次尝试部署 MERN 堆栈实践项目。我是一个相当新的编码员。

我的项目在开发/本地工作得非常好。我在 localhost:3000 上运行的 React 应用程序连接到我部署到 Heroku 的 Node/Express/MongoDB Atlas API 并且可以成功发出请求。 但是，当我打开已部署的 Netlify 应用程序时，它无法加载任何数据，并且 Heroku 日志没有显示任何活动，这表明它根本没有连接到后端。

以下是一些可能相关的代码：

------------后端---------------

environment.js（ 中的信息已编辑）

export const dbURI = process.env.MONGODB_URI || 'mongodb+srv://<name>:<password>@festivalist.iyq41.mongodb.net/festivalist?retryWrites=true&w=majority'
export const port = process.env.PORT || 4000
export const secret = process.env.SECRET || '<secret>'

index.js

import express from 'express'
const app = express()
import mongoose from 'mongoose'
import router from './config/router.js'
import { port, dbURI } from './config/environment.js'

const startServer = async () => {
  try {
    await mongoose.connect(dbURI, { useNewUrlParser: true, useCreateIndex: true, useUnifiedTopology: true })
    console.log('???? Database has connected successfully')

    app.use(express.json())

    app.use((req, _res, next) => {
      console.log(`???? Incoming request: ${req.method} - ${req.url}`)
      next()
    })

    app.use('/api', router)

    app.listen(port, () => console.log(`???? Express is up and running on port ${port}`))
  } catch (err) {
    console.log('???? Something went wrong starting the app')
    console.log(err)
  }
}
startServer()

package.json

{
  "name": "sei-project-three",
  "version": "1.0.0",
  "main": "index.js",
  "dependencies": {
    "bcrypt": "^5.0.1",
    "dotenv": "^10.0.0",
    "express": "^4.17.1",
    "jsonwebtoken": "^8.5.1",
    "mongo": "^0.1.0",
    "mongoose": "^5.12.0",
    "nodemon": "^2.0.14"
  },
  "type": "module",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "seed": "node db/seeds.js",
    "dev": "nodemon",
    "start": "node index.js"
  },
  "devDependencies": {
    "eslint": "^7.22.0"
  },
  "engines": {
    "node": "16.8.0"
  }
}

----------前端--------------

setupProxy.js

const { createProxyMiddleware } = require('http-proxy-middleware')

module.exports = function (app) {
  app.use(createProxyMiddleware('/api', { target: 'https://festivalist-api.herokuapp.com', "changeOrigin": true }))
}

示例请求

const ArtistIndex = () => {
  const [artists, setArtists] = useState([])

  useEffect(() => {
    const getData = async () => {
      const { data } = await axios.get('/api/artists')
      setArtists(data)
    }
    console.log('artists2', artists)
    getData()
  }, [])

package.json

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "axios": "^0.21.1",
    "http-proxy-middleware": "^1.0.5",
    "mapbox-gl": "^2.2.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-map-gl": "^5.2.5",
    "react-mapbox-gl": "^5.1.1",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.3",
    "sass": "^1.42.1",
    "semantic-ui-css": "^2.4.1",
    "semantic-ui-react": "^2.0.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^4.25.0",
    "@typescript-eslint/parser": "^4.25.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^7.27.0",
    "eslint-config-react-app": "^6.0.0",
    "eslint-plugin-flowtype": "^5.7.2",
    "eslint-plugin-import": "^2.23.3",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-react": "^7.23.2",
    "eslint-plugin-react-hooks": "^4.2.0"
  }
}

一些注意事项：

• 我已将 MongoDB Atlas 0.0.0.0/0 中的所有 IP 地址列入白名单
• 我不确定为什么，但我必须在 heroku api url 的末尾加上“/api/”才能获取数据，即：https://festivalist-api.herokuapp.com/api/festivals
• 我在 Heroku 中添加了 Config Vars，但我认为这阻止了我的应用程序在本地工作，所以我删除了它们。也不完全确定我了解他们的工作。

我已经尝试部署它好几天了，所以任何建议都会是帮助或任何故障排除提示，因为我是编码新手！谢谢

Answer 1

你必须把'/api'放在heroku API的末尾，因为这是你在后端index.js中使用的app.use('/api', router)

问题似乎与中间件 setupProxy.js 有关，因为您已经可以 ping API。一种解决方法是仅更新您的请求以使用完整的 URI。即

const ArtistIndex = () => {
  const [artists, setArtists] = useState([])

  useEffect(() => {
    const getData = async () => {
      const { data } = await axios.get('https://festivalist-api.herokuapp.com/api/artists')
      setArtists(data)
    }
    console.log('artists2', artists)
    getData()
  }, [])