我在我的 React JS 应用程序中使用 Nodemailer 来获取联系表单数据并将其发送到我的邮件，在我的本地机器上一切正常，我将我的应用程序部署到 heroku，一位测试我的应用程序的朋友注意到我的表单没有提交，当然提交并传递到我的消息框。
清除历史记录和缓存后，我在Chrome上打开了我的应用程序，并在控制台中注意到此错误：
xhr.js:166 OPTIONS http://localhost:5000/send net::ERR_CONNECTION_REFUSED
createError.js:17 Uncaught (in promise) Error: Network Error
at e.exports (createError.js:17)
at XMLHttpRequest.p.onerror (xhr.js:80)
这是火狐浏览器上的错误消息：
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:5000/send. (Reason: CORS request did not succeed).
拜托，我将不胜感激任何关于解决这个问题的帮助，我已经为此工作了几天，查找了资源和整个与 Stackoverflow 相关的问题，但这些答案在我的情况下都不起作用。
这是我的 Axios 获取函数调用：
const handleFormSubmit = e => {
const name = nameRef.current.value, email = emailRef.current.value,
message = messageRef.current.value;
e.preventDefault();
axios({
url: 'http://localhost:5000/send',
method: "POST",
data: {
name,
email,
message
}
}).then(({data}) => {
if (data.msg === 'success') {
createNotification('Message received, thank you.');
setClearForm(true);
setTimeout(() => {setClearForm(false)})
} else if (data.msg === 'fail') {
console.log(data);
createNotification(`Hmm... Something went wrong!`);
}
})
};
这是我的服务器代码段：
const express = require('express');
const cors = require('cors');
const path = require('path');
const nodeMailer = require('nodemailer');
const logger = require('morgan');
const cookieParser = require('cookie-parser');
const bodyParser = require('body-parser');
if (process.env.NODE_ENV !== 'production') require('dotenv').config();
const app = express();
const port = process.env.PORT || 5000;
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(cookieParser());
app.use(cors());
app.get('http://localhost:5000/send', function (req, res, next) {
res.json({msg: 'This is CORS-enabled for all origins!'})
});
if (process.env.NODE_ENV === 'production') {
app.use(express.static(path.join(__dirname, 'client/build')));
app.get('*', function (req, res) {
res.sendFile(path.join(__dirname, 'client/build', 'index.html'))
})
}
app.listen(port, err => {
if (err) throw err;
console.log(`Server running on port ${port}`)
});
app.post('/send', (req, res) => {
let name = req.body.name;
let email = req.body.email;
let subject = `Message from ${name}, through CodeSurge`;
let message = req.body.message;
let content = `name: ${name} n email: ${email} n message: ${message} `;
let transporter = nodeMailer.createTransport({
host: 'smtp.gmail.com',
port: 465,
secure: true,
auth: {
user: process.env.USER,
pass: process.env.PASS
}
});
let mail = {
from: name,
to: 'myname@mymail.com',
subject: subject,
text: content
};
transporter.sendMail(mail, (err, data) => {
if (err) {
console.log(err);
res.json({
msg: 'fail',
err
})
} else {
res.json({
msg: 'success'
})
}
});
});
如果需要，这是我在Heroku上的应用程序地址：CodeSurge
我肯定会感谢每个人在这方面的专业知识和知识，因为我已经被困在这里好几天了，试图自己弄清楚。
问题是您尝试向本地服务器发出 http 请求 (http://localhost:5000/send(。相反，您需要指向实际服务器，如果您使用的是代理，则需要指向完整 url 或相对路径。
经过大量的查找、谷歌搜索和重新编辑我的代码，我终于让它工作了，我所做的是有条件地将url传递给我的axios获取请求，如下所示：
// Form submit handler
const handleFormSubmit = e => {
let url;
process.env.NODE_ENV === 'production' ? url = `https://codesurge.herokuapp.com/send`
: url = "http://localhost:5000/send";
const name = nameRef.current.value, email = emailRef.current.value,
message = messageRef.current.value;
e.preventDefault();
axios({
url: url,
method: "POST",
data: {
name,
email,
message
}
}).then(({data}) => {
if (data.msg === 'success') {
createNotification('Message received, thank you.');
setClearForm(true);
} else if (data.msg === 'fail') {
createNotification(`Hmm... Something went wrong!`);
}
})
};
之后，我在 Heroku 上的"我的应用程序设置"选项卡下的"配置变量"部分添加了我的 Gmail 用户名和密码，这为我创造了魔力。
注意：如果您使用Gmail作为邮件提供商，则必须通过在此处启用该功能来远程访问您的邮件：https://accounts.google.com/b/0/DisplayUnlockCaptcha
感谢所有为此添加输入的人。