Error while making a request from React server to node Server

Question

Hey guys i was making a MERN stack project so the issue i am facing is that in action creater from react server i have to make a get request to node js server or in short

From http://localhost:3000/ i have to make request to the data i have in http://localhost:5000/api/currentuser

The data stored in nodejs server is {"_id":"5d73fd9003b5302f6b013a46","googleid":"109463598810933991924","__v":0} which is being fetched from mongodb

So what i did is inside my action creater file

i did like

import axios from "axios";
export const fetchuser = () => {
    return async(dispatch)=>{
       const res=await axios.get("http://localhost:5000/api/currentuser")
            dispatch({
                type:'fetchuser',
                payload:res.data

        })

    }

};

but then in my console i faced the error and it says

Access to XMLHttpRequest at 'http://localhost:5000/api/currentuser' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

You're running into a CORS issue. Have you setup CORS in with your express server? expressjs.com/en/resources/middleware/cors.html — skovy
– skovy, Commented Sep 8, 2019 at 19:45

skovy · Accepted Answer · 2019-09-08 19:48:23Z

1

Without having the Express code it's hard to be confident but you likely need to configure the Express server to have CORS setup.

You can see the docs here for Express + CORS: https://expressjs.com/en/resources/middleware/cors.html

var express = require("express");
var cors = require("cors");
var app = express();

app.use(
  cors({
    origin: "http://localhost:3000"
  })
);

For more details on CORS in general, read this.

answered Sep 8, 2019 at 19:48

skovy

5,6502 gold badges23 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

RRR uzumaki Over a year ago

hey but i am not getting my data back i mean when i go to localhost:5000/api/currentuser in my browser i get a response back but here after making get request by axios my data is an empty string data:" "

skovy Over a year ago

Are you still getting the blocked by CORS policy error?

RRR uzumaki Over a year ago

made a github repo if u wanna look out github.com/ratnabh/node-with-react

Nikhil Kadam · Accepted Answer · 2019-09-08 20:34:24Z

1

This is cross origin issue.You have not provided access to http://localhost:3000/ in nodejs.

There are two simple ways,

1. Simple way without any npm package:

app.use(function (req, res, next) {

    res.setHeader('Access-Control-Allow-Origin', 'http://localhost:3000');

    // methods you wish to allow
    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');

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

2. Use cors npm package:

Official document url https://expressjs.com/en/resources/middleware/cors.html

-To allow all domain/url

import cors from 'cors';
app.use(cors());

You will notice new header is being returned as Access-Control-Allow-Origin: *

-To allow specific domain/urls,

import cors from 'cors';

app.use(cors({
  origin: 'http://localhost:3000/'
}));

Header will be,

Access-Control-Allow-Origin: http://localhost:3000

edited Sep 8, 2019 at 20:34

answered Sep 8, 2019 at 20:17

Nikhil Kadam

1537 bronze badges

6 Comments

RRR uzumaki Over a year ago

hey but i am not getting my data back i mean when i go to localhost:5000/api/currentuser in my browser i get a response back but here after making get request by axios my data is an empty string data:" "

Nikhil Kadam Over a year ago

Could you please share me sample code of your logic?. so i can help you finding solution.

Nikhil Kadam Over a year ago

There is nothing in req.user. router.get('/api/currentuser',(req,res,next)=>{ res.send(req.user) })

Nikhil Kadam Over a year ago

Nodejs route try console.log(req.user); look whether there is anything in side it.

RRR uzumaki Over a year ago

hey nikhil well m not sure if u tried this but first u have to go to the route localhost:5000/auth/google then u will be signed in google account after that going on localhost:5000/api/currentuser manually in browser u will get details

|

Collectives™ on Stack Overflow

Error while making a request from React server to node Server

2 Answers 2

3 Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related