React node express应用程序-Heroku CORS错误

Question

我在Heroku上设置了一个express项目，在vercel上设置了一个react前端。当我从前端发出请求时，会出现以下错误：

在'https://helpr-dev.herokuapp.com/users/register'从原点'https://helpr-front.vercel.app“”已被CORS策略阻止：对飞行前请求的响应未通过访问控制检查：请求的资源上不存在“access control Allow Origin”标头。如果不透明响应满足您的需要，请将请求的模式设置为“无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()
        
    }

我尝试过删除模式：'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地图集的连接问题造成的。首先，Heroku IP地址没有在数据库网络连接上列入白名单。像这里提到的那样修复：将Heroku应用程序连接到Atlas MongoDB云服务

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

最后，似乎有必要在我提出的每个请求上添加模式：'cors'，config。

在express上，不需要cors配置。我只使用app。使用（cors（））