How to use Session in post method in express

Question

I am using ExpressJS as backend and Reactjs in frontend. I am trying to use session in app.post but it does not work when i do not include credentials whenever i include credentials i get the following error even after setting all Headers. (Note: data is in json)

Frontend :

Axios.post('http://localhost:5002/api/me/create', data ,
            {
                withCredentials: true,
                headers: { 'content-type': 'application/json' },
            })

Backend :

 app.post('/api/me/create', function (req, res) {
    res.setHeader('Access-Control-Allow-Origin', 'http://localhost:5000');
    res.setHeader('Access-Control-Allow-Credentials', 'true');
    res.setHeader('Access-Control-Allow-Headers', 'content-type');
    res.setHeader('Content-Type', 'application/json');
    console.log(req.session.uuid);
    req.session.uuid = 5;
}

Error :

Access to XMLHttpRequest at 'http://localhost:5002/api/me/create' from origin 'http://localhost:5000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

A preflight CORS error means you need a request handler on your server that handles the OPTIONS request and returns the right info from that in order to approve this type of request. Certain characteristics of a request can trigger the need for preflighting (such as custom headers). Look up "preflight CORS express" for coding examples. — jfriend00
– jfriend00, Commented Aug 2, 2019 at 3:22

Pouya Ataei · Accepted Answer · 2019-08-02 03:31:45Z

Problem

You’ve run afoul of the Same Origin Policy – it says that every AJAX request must match the exact host, protocol, and port of your site.

As it can be seen your frontend is running on port 5002 and your backend is running on port 5000. So the browser automatically says: hmmm, that sounds like a threat! and tadaa... CORS error...

To be clear, this is not a React error. It afflicts all web apps equally.

How to fix it

1 CORS header

You can install CORS by running the following command;

npm install cors

and use it as a middle ware like this:

var express = require('express');
// Import the library:
var cors = require('cors');

var app = express();

// Then use it before your routes are set up:
app.use(cors());

2 Proxy Server

If you can’t modify the server, you can run your own proxy. And this proxy can return the Access-Control-Allow-Origin header if it’s not at the Same Origin as your page

3 JSONP

If CORS and the proxy server don’t work for you, JSONP may help. You essentially make a GET request with a callback parameter:

(get) http://api.example.com/endpoint?callback=foo

Your can read in detail here...

Collectives™ on Stack Overflow

How to use Session in post method in express

1 Answer 1

1 CORS header

2 Proxy Server

3 JSONP

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 CORS header

2 Proxy Server

3 JSONP

Comments

Your Answer

Sign up or log in

Post as a guest

Related