title: how can I set and access cookies in mern stack
body: <p>i am trying to set and access cookies in mern stack where i used express js. I tried to store the jwt token in cookies, while testing api in thunder client the token was stored in cookies successfully. But when i used axios to make request to that api i did not find the cookies in the broser application tab.
  There is no error, all the functionality works fine, the problem is i am not able to set and access the cookie in frontend.</p>
  <p>this is my app.js file</p>
  <pre><code>require(&quot;dotenv&quot;).config();
  const express = require(&quot;express&quot;);
  const mongoose = require(&quot;mongoose&quot;);
  const cookieParser = require(&quot;cookie-parser&quot;);
  const bodyParser = require(&quot;body-parser&quot;);
  const errorMiddleware = require(&quot;./middleware/error&quot;);
  const cors = require(&quot;cors&quot;);
  
  const phoneRoutes = require(&quot;./routes/phone-routes&quot;);
  const userRoutes = require(&quot;./routes/user-routes&quot;);
  
  const app = express();
  
  app.use(
    cors({
      origin: &quot;http://localhost:3000&quot;,
      credentials: true,
    })
  );
  app.use(express.json());
  app.use(helmet());
  app.use(cookieParser());
  app.use(bodyParser.urlencoded({ extended: true }));
  
  app.use(&quot;/api/phones&quot;, phoneRoutes);
  app.use(&quot;/api/user&quot;, userRoutes);
  
  
  app.use(errorMiddleware);
  
  mongoose
    .connect(&quot;mongodb://localhost:27017/project&quot;, {
      useNewUrlParser: true,
      useUnifiedTopology: true,
    })
    .then(() =&gt; {
      app.listen(8000, () =&gt; {
        console.log(&quot;connected to database&quot;);
      });
    })
    .catch((e) =&gt; {
      console.log(e);
    });
  </code></pre>
  <p>this is routing file for login</p>
  <pre><code>const express = require(&quot;express&quot;);
  const bcrypt = require(&quot;bcryptjs&quot;);
  const User = require(&quot;../models/user&quot;);
  const router = express.Router();
  
  router.post(&quot;/login&quot;, async(req, res, next) =&gt;{
    const { email, password } = req.body;
  
    const user = await User.findOne({ email }).select(&quot;+password&quot;);
  
    if (!user) {
      return next(new ErrorHandler(&quot;Please enter valid credentials&quot;, 401));
    }
  
    const isPasswordMatched = await bcrypt.compare(password, user.password);
  
    if (!isPasswordMatched) {
      return next(new ErrorHandler(&quot;Please enter valid credentials&quot;, 401));
    }
  
    const token = await user.getJWTToken();
  
    res
      .status(200)
      .cookie(&quot;token&quot;, token, {
        expires: new Date(
          Date.now() + process.env.COOKIE_EXPIRE * 24 * 60 * 60 * 1000
        ),
        httpOnly: true,
      })
      .json({ success: true, user, token });
  })
  module.exports = router;
  </code></pre>
  <p>this is my login action in redux using axios. And I have already tried using widthCredentials and Credentials in axios request but still got no result.</p>
  <pre><code>export const login = (email, password) =&gt; async (dispatch) =&gt; {
    try {
      dispatch({ type: LOGIN_REQUEST });
  
      const url = &quot;http://localhost:8000/api/user/login&quot;;
      const config = { headers: { &quot;Content-Type&quot;: &quot;application/json&quot; } };
  
      const { data } = await axios.post(url, { email, password }, config);
  
  
      dispatch({ type: LOGIN_SUCCESS, payload: data.user });
    } catch (error) {
      dispatch({ type: LOGIN_FAIL, payload: error.response.data.message });
    }
  };
  </code></pre>
  <p>this is a user reducer file.</p>
  <pre><code>export const userReducer = (state = { user: {} }, action) =&gt; {
    switch (action.type) {
      case LOGIN_SUCCESS:
        return {
          ...state,
          loading: false,
          isAuthenticated: true,
          user: action.payload,
        };
    }
  }
  </code></pre>