反应节点快递应用程序 - Heroku CORS 错误

Question

我在 Heroku 上设置了一个 express 项目，并在 vercel 上设置了一个反应前端。 当我从前端发出请求时，我收到以下错误：

CORS 政策已阻止从源“https://helpr-front.vercel.app”访问“https://helpr-dev.herokuapp.com/users/register”获取：响应预检请求未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。如果不透明的响应满足您的需求，请将请求的模式设置为“no-cors”以获取禁用 CORS 的资源。

我在 Express 应用上实现了 CORS：

const cors = require('cors')
app.use(cors())

我也尝试过给它传递一个类似的配置：

const whitelist = ['http://localhost:3000', 'https://helpr-front.vercel.app/']
const corsOptions = {
  origin: function (origin, callback) {
    if (!origin || whitelist.indexOf(origin) !== -1) callback(null, true)
    else callback(new Error('Not allowed by CORS'))
  },
  credentials: true,
}

app.use(cors(corsOptions))

react 应用中的请求如下所示：

const submitRegisterForm = async e => {
        e.preventDefault()

            const response = await fetch(`${serverUrl}/users/register`, {
                method: 'POST',
                mode: 'cors',
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    name: name,
                    email: email,
                    password: password,
                    accountType: accountType
                })
            })

            const data = await response.json()
        
    }

我尝试删除 mode: 'cors' 部分，但没有任何区别。

谁能告诉我这里缺少什么？

前端应用托管在此处：https://helpr-front.vercel.app/ 后端应用托管在这里：https://helpr-dev.herokuapp.com/

前端完整代码可以在这里找到：https://github.com/coccagerman/helpr-front 后端完整代码可以在这里找到：https://github.com/coccagerman/helpr-back

谢谢！

Answer 1

所以这主要是由于与 mongoDb atlas 的连接问题造成的。 首先，Heroku IP 地址没有被列入数据库网络连接的白名单。像这里提到的那样修复它：Connecting Heroku App to Atlas MongoDB Cloud service

然后我在使用的 mongo atlas 连接 URI 上出现错误。

最后，似乎有必要在我提出的每个请求上添加mode: 'cors', 配置。

在 express 上，不需要 cors 配置。我只用app.use(cors())