部署到 Heroku 时，请求的资源上不存在"访问控制允许源"标头

Question

所以我有一个简单的Heroku应用程序，只需将人们注册到我的Mailchimp联系人列表中。我让它在本地工作，但在部署应用程序时，我会遇到CORS错误。

我尝试过添加withCredentials:true以满足我的axios请求，并在我的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)
}
}
})
})

Answer 1

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

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

因为我最初没有这样做，所以我犯了一个错误，用实际的字符串替换了所有的env变量，这导致了CORS问题。Mailchimp还停用了我的API密钥，因为该密钥是在网上发布的。因此，这实际上是一个分层的问题，而不是CORS问题。