axios.get 不返回数据

Question

I'm using react, express and passport to manage the auth flow.

I recently separated the frontend and the backend into two apps in Heroku, and I'm trying to connect both sides (before I had the a client folder inside the server folder). When testing locally, my backend works after login accessing to http://localhost:5000/auth/current_user , but when I use axios and call from my redux action it doesn't return any response.

This is my code from the front side:

export const fetchUser = () => async dispatch => {
  try {
    const res = await axios.get(
      process.env.REACT_APP_API_URL + "/auth/current_user"
    );
    console.log("fetchUser: ", res);
    dispatch({ type: FETCH_USER, payload: res.data });
  } catch (e) {
    if (e.response) {
      console.log("fetchUser:", e.response);
    }
  }
};

When I log my backend side to see if there's a session, I get {} as response. Sometimes, randomly I do get the passport info { passport: { user: '5da9b04eb086af53103ec4e9' } }

  app.get("/auth/current_user", (req, res) => {
    console.log(req.session);
    res.send(req.user);
  });

Headers from Chrome are the following (without any response...): Chrome headers

Would be great if someone can help me out!

Thanks in advance!

Answer 1

I've finally found a solution to the problem... Seems like it was a CORS problem. I don't really understand it clearly, but will study it.

So, partially, the solution was in this answer: Express + Passport.js: req.user is UNDEFINED

With this, the cookies appeared in my console log at the front side. To fully work, I had to add the origin domain to the cors.

In conclusion, I added to my index.js at the server side:

app.use(
  cors({
    methods: ["GET", "POST"],
    credentials: true,
    origin: "http://localhost:3000"
  })
);

And this config to my axios get:

    const config = {
      withCredentials: true,
      headers: {
        "Content-Type": "application/json"
      }
    };

Answer 2

Instead of all this, you can use cors npm like this.

npm install --save cors

var express = require('express');
var cors = require('cors');
var app = express();
app.use(cors());
/* your regular routes go here */