部署到 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 问题。
所以我有一个简单的 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 问题。