部署到 Heroku 时,请求的资源上不存在 'Access-Control-Allow-Origin' header

No 'Access-Control-Allow-Origin' header is present on the requested resource when deployed to Heroku

所以我有一个简单的 Heroku 应用程序,可以让人们注册到我的 Mailchimp 联系人列表。我在本地运行它,但在部署应用程序时出现 CORS 错误。

我已经尝试在我的 axios 请求中添加 withCredentials: true 并在我的 Express 应用中添加 cors origin,但它仍然不起作用。

我浏览了各种关于 cors 问题的文章,试图让它发挥作用并理解为什么会这样。

我已经用虚拟文本替换了一些敏感信息,但这实际上是发出请求的方式以及服务器对信息的处理方式。

反应代码:

const submitForm = async (values) => {
    const { email } = values;

    try {
        const payload = {
            email_address: email
        };

        await axios.post("https://some-url.herokuapp.com", payload, { withCredentials: true });
            handleMessage("Thank you for signing up.");
    } catch (error) {
        console.log(error.message);
        handleMessage(error.message);
    }
}

快递编码:

const cors = require('cors');

app.use(cors({
    origin: `https://www.mycustomdomain.com/`,
    credentials: true
}));

app.post('/', jsonParser, (req, res, next) => {
    const { email_address } = req.body

    if (!email_address) {
        return res.status(400).json({
            error: `Missing email in request body`
        })
    }

    const data = {
        members: [
            {
                email_address,
                status: 'subscribed'
            }
        ]
    }

    const payload = JSON.stringify(data);

    const options = {
        url: `https://mailchim-api.com`,
        method: 'POST',
        headers: {
            Authorization: `auth authCode`
        },
        body: payload
    }

    request(options, (err, response, body) => {
        if (err) {
            res.status(500).json(err)
        } else {
            if (response.statusCode === 200) {
                res.status(200).json(body)
            }
        }
    })
})

我最初的问题是我没有手动将 Express 应用程序中使用的环境变量输入到 Heroku 中。

我必须 运行 heroku config:set APIKEY=SOME-PASSWORD 才能让我的所有 env 变量在 Heroku 上使用。 https://devcenter.heroku.com/articles/config-vars

因为我最初没有这样做,所以我错误地将所有环境变量替换为导致 CORS 问题的实际字符串。 Mailchimp 还停用了我的 API 密钥,因为该密钥已在线发布。因此,这实际上是一个分层问题,不完全是 CORS 问题。