OPTIONS net::ERR_CONNECTION_REFUSED + 同源策略不允许读取远程资源（原因：CORS 请求未成功）

Question

我在我的 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)

这是 Firefox 上的错误消息：

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 fetch 函数调用：

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!`);
        }
    })
};

这是我的服务器 sn-p：

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

我肯定会感谢每个人在这方面的专业知识和知识，因为我已经被困在这里好几天了，试图自己弄清楚。

Answer 1

经过大量查找、谷歌搜索和重新编辑我的代码，我终于让它工作了，我所做的是有条件地将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 上我的应用设置选项卡下的 Config Vars 部分添加了我的 Gmail 用户名和密码，这对我来说很神奇。

注意：如果您使用 Gmail 作为您的邮件提供商，您必须通过在此处启用该功能来远程访问您的邮件：https://accounts.google.com/b/0/DisplayUnlockCaptcha

感谢为此添加意见的所有人。

Answer 2

问题是您尝试向本地服务器 (http://localhost:5000/send) 发出 http 请求。相反，您需要指向您的实际服务器，如果您使用的是代理，则可以是完整的 url 或相对路径。