Ad

OPTIONS Net::ERR_CONNECTION_REFUSED + The Same Origin Policy Disallows Reading The Remote Resource (Reason: CORS Request Did Not Succeed)

- 1 answer

I'm using Nodemailer in my React JS app to take the contact form data and deliver it to my mail, everything worked pretty fine on my Local Machine, I deployed my app to heroku and a friend testing my app out noticed my form wasn't submitting, which of course submitted and got delivered to my Message Box.

I opened my app on my Chrome after clearing the history and cache, and noticed this error in the console:

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)

Here's the error message on 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).

Please, I will appreciate any assistance as to getting this resolved, I've been on this for days, looked up resources and the whole of Stackoverflow related questions, but none of those answers worked in my case.

Here's my Axios fetch function call:

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

Here's my server snippet:

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: '[email protected]',
        subject: subject,
        text: content
    };

    transporter.sendMail(mail, (err, data) => {
        if (err) {
            console.log(err);
            res.json({
                msg: 'fail',
                err
            })
        } else {
            res.json({
                msg: 'success'
            })
        }
    });
});

If needed, here's my app address on Heroku: CodeSurge

I sure will appreciate everyone's expertise and knowledge on this, as I've been stuck here for days now, trying to figure it out on my own.

Ad

Answer

After a lot of look-ups, Googling and reediting of my codes, I finally got it to work, what I did was conditionally pass the url to my axios fetch request like this:

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

After which I added my Gmail Username and Password under the my App Settings tab on Heroku, at the Config Vars section, that did the magic for me.

NOTE: If you're using Gmail as your mail provider, you have got to give access to your mail remotely by enabling that feature here: https://accounts.google.com/b/0/DisplayUnlockCaptcha

Thanks to everyone that added an input to this.

Ad
source: stackoverflow.com
Ad