Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Cross-Origin Request Blocked with React and Express

So I hit this error, when I was trying to send data to the back end using React. From what I learnt I need to allow the communication on the back-end and in the .htaccess file. Here are some of the links I used:

No 'Access-Control-Allow-Origin' - Node / Apache Port Issue

How does Access-Control-Allow-Origin header work?

Both of them have code, but it didn't help.

So far my Server-side code is this:

app.use(function (req, res, next) {
    // Website you wish to allow to connect
    // res.setHeader('Access-Control-Allow-Origin', 'http://localhost:3000');

    res.setHeader('Access-Control-Allow-Origin', '*');

    // Request methods you wish to allow
    res.setHeader('Access-Control-Allow-Methods', 'POST');

    // Request headers you wish to allow
    res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');

    // Set to true if you need the website to include cookies in the requests sent
    // to the API (e.g. in case you use sessions)
    res.setHeader('Access-Control-Allow-Credentials', true);

    // Pass to next layer of middleware
    next();
});

This is my Client-side code:

sendMail(e) {
    e.preventDefault();
    var name = document.getElementById('name').value;
    var contactReason = document.getElementById('contactReason').value;
    var email = document.getElementById('email').value;
    var additionalInfo = document.getElementById('additionalInfo').value;
    var body = {
        name: name,
        contactReason: contactReason,
        email: email,
        additionalInfo: additionalInfo,
    };
    console.log(JSON.stringify(body));
    fetch('http://localhost:4000/', {
        method: 'POST',
        body: body,
    }).then(r => console.log(r)).catch(e => console.log(e));
}

So what am I missing? I do not have an .htaccess file, but I'm doing it all locally so I'm not sure if I can even use it.

It looks to me like I'm allowing all I need, but I guess it's not enough.

If you're going to mark as a duplicate, please at least make sure my issues are covered by the answer.

like image 587
Alex Ironside Avatar asked Jun 21 '18 12:06

Alex Ironside


People also ask

How do I allow cross origin in Express?

Enabling CORS The easiest way to get CORS working in Express is by using the cors npm module. That's it. CORS is now enabled. The Access-Control-Allow-Origin header determines which origins are allowed to access server resources over CORS (the * wildcard allows access from any origin).


2 Answers

There's a node package called cors which makes it very easy.

$npm install cors

const cors = require('cors')

app.use(cors())

You don't need any config to allow all.

See the Github repo for more info: https://github.com/expressjs/cors

like image 91
barro32 Avatar answered Oct 13 '22 05:10

barro32


One reason might be you're using the route as localhost:8000 rather than http://localhost:8000.

USE

http://localhost:8000

DON'T USE

localhost:8000
like image 24
Sachin Shukla Avatar answered Oct 13 '22 04:10

Sachin Shukla