We Keep Coding

ReactJS Node and Axios :No 'Access-Control-Allow-Origin' header is present on the requested resource

I'm learning programming now so forgive me for any mistakes, I'll be grateful for any tips.
I have an API that is hosted in the following domain ("api-myapp.com") and I'm trying from my localhost where I'm creating my front-end to post a form (which only logged in users can send) using axios , but the request takes a long time to complete and when it completes it returns the following error (No 'Access-Control-Allow-Origin' header is present on the requested resource.)
(net::ERR_FAILED 504), I've tried some solutions I found on the internet but none seem to have worked, this is my code:
FrontEnd:
try {
const response = await axios.post('/alunos/', {
nome,sobrenome,idade,sangue,varinha,patrono,house,sala,
});
toast.success('Cadastrado com sucesso');
console.log(response);
} catch (e) {
console.log(e);
const errors = get(e, 'response.data.errors', []);
errors.map((error) => toast.error(error));
}
When you logged in
try {
const response = yield call(axios.post, '/tokens', payload);
yield put(actions.loginSuccess({ ...response.data }));
axios.defaults.headers.Authorization = `Bearer ${response.data.token}`;
toast.success('Login realizado com sucesso!');
payload.navigate('/dashboard');
}
BackEnd
class App {
constructor() {
this.app = express();
this.middlewares();
this.routes();
}
middlewares() {
this.app.use(cors({ origin: '*' }));
this.app.use(helmet({ crossOriginResourcePolicy: false }));
this.app.use(express.urlencoded({ extended: true }));
this.app.use(express.json());
this.app.use('/images/', express.static(resolve(__dirname, '..', 'uploads', 'images')));
}
routes() {
this.app.use('/', homeRoutes);
this.app.use('/prof', profRoutes);
this.app.use('/tokens', tokenRoutes);
this.app.use('/alunos', alunoRoutes);
this.app.use('/casas', casaRoutes);
this.app.use('/provas', provaRoutes);
this.app.use('/materias', materiaRoutes);
this.app.use('/salas', salaRoutes);
this.app.use('/fotosAlunos', fotoAlunoRoutes);
this.app.use('/fotosProf', fotoProfRoutes);
}
}

You have to enable CORS in backend to allow request through different ports.
For your case since you are using express and cors library, you can try this.
app.use(
cors({
credentials: true,
methods: 'GET,HEAD,PUT,PATCH,POST,DELETE,OPTIONS',
allowedHeaders: ['Content-Type', 'Authorization'],
origin: ['http://localhost:3000', 'http://localhost:3030'], // whatever ports you used in frontend
})
);

how to get cookie in react passed from express js api (MERN stack)

I have an api in express js that stores token in cookie on the client-side (react). The cookie is generated only when the user logins into the site. For example, when I test the login api with the postman, the cookie is generated as expected like this:
But when I log in with react.js then no cookie is found in the browser. Looks like the cookie was not passed to the front end as the screenshot demonstrates below:
As we got an alert message this means express api is working perfectly without any error!!
Here is my index.js file on express js that includes cookie-parser middleware as well
require("dotenv").config();
const port = process.env.PORT || 5050;
const express = require("express");
const app = express();
const cors = require("cors");
const authRouter = require("./routes/auth");
var cookieParser = require('cookie-parser')
connect_db();
app.use(express.json());
app.use(cookieParser())
app.use(cors());
app.use("/" , authRouter);
app.listen(port , () => {
console.log("Server is running!!");
})
Code for setting up the cookie from express api only controller
const User = require("../models/user");
const jwt = require("jsonwebtoken");
const bcrypt = require('bcrypt')
const login = async (req, res) => {
const { email, password } = req.body;
try {
const checkDetails = await User.findOne({ email });
if (checkDetails) {
const { password: hashedPassword, token, username } = checkDetails;
bcrypt.compare(password, hashedPassword, function (err, matched) {
if (matched) {
res.cookie("token", token, { expires: new Date(Date.now() + (5 * 60000)) , httpOnly: true }).json({ "message": "You logged in sucessfully!" });
} else {
res.status(500).json({ "message": "Wrong password" });
}
});
} else {
res.status(500).json({ "message": "Wrong email" });
}
} catch (error) {
console.log(error.message);
}
}
Here is the react.js code that I am using to fetch data from api without using a proxy in package.json file
if (errors.length === 0) {
const isLogin = await fetch("http://localhost:5000/api/login", {
method: "POST",
body: JSON.stringify({ email, password }),
headers: {
"Content-Type": "application/json"
}
});
const res = await isLogin.json();
if(res) alert(res.message);
}
I want to get to know what is the reason behind this "getting cookie in postman but not in the browser". Do I need to use any react package?
The network tab screenshot might help you.
If I see in the network tab I get the same cookie, set among the other headers

To my understanding, fetch doesn't send requests with the cookies your browser has stored for that domain, and similarly, it doesn't store any cookies it receives in the response. This seems to be the expected behaviour of fetch.
To override this, try setting the credentials option when making the request, like so:
fetch(url, {
// ...
credentials: 'include'
})
or, alternatively:
fetch(url, {
// ...
credentials: 'same-origin'
})
You can read more about the differences between the two here.

I got my error resolved with two changings in my code
In front end just added credentials: 'include'
fetch(url, {
method : "POST"
body : body,
headers : headers,
credentials: 'include'
})
And in back end just replaced app.use(cors()); to
app.use(cors({ origin: 'http://localhost:3000', credentials: true, exposedHeaders: ['Set-Cookie', 'Date', 'ETag'] }))
That's it got resolved, Now I have cookies stored in my browser!!! Great. Thanks to this article:
https://www.anycodings.com/2022/01/react-app-express-server-set-cookie-not.html

during development i also faced same things, let me help you that how i solve it,
Firstly you use proxy in your react package.json, below private one:-
"private": true,
"proxy":"http://127.0.0.1:5000",
mention the same port on which your node server is running
Like:-
app.listen(5000,'127.0.0.1',()=>{
console.log('Server is Running');
});
above both must be on same , now react will run on port 3000 as usual but now we will create proxy to react So, react and node ports get connected on same with the help of proxy indirectly.
Now, when you will make GET or POST request from react then don't provide full URL, only provide the path on which you wants to get hit in backend and get response,
Example:-
React side on sending request, follow like this:-
const submitHandler=()=>{
axios.post('/api/loginuser',
{mobile:inputField.mobile,password:inputField.password})
.then((res)=>{
console.log(res);
})
.catch((err)=>{
console.log(err);
})
}
Node side where it will hit:-
app.post('/api/loginuser', async(req,res)=>{
//Your Code Stuff Here
res.send()
}
on both side same link should hit, it is very important
it will 100%.
don't forget to mention
on node main main where server is listening

My express-session is getting overwritten every time I send a new request, and I'm wondering if it is because of my dev environment? REACT + EXPRESS

EDIT - I no longer think it is a development environment issue as the same thing persists in production.
First off, appreciate anytime spent on this - I know that this is a commonly asked question, but I've perused so many questions and tried applying so many of the solutions to no avail.
To summarize, I currently have a React Front-end that is sending request with the Fetch API to my Express server. I want to use express-sessions to save my logged in user information for the session to use and authenticate as the user uses the application.
I'm having this weird issue where every time a new request is sent, the cookie in my browser in the application tab gets set to something completely new. I might be understanding this wrong, but I thought that that was supposed to remain consistent throughout the session, but it doesn't seem to be the case. This is making it so that every time I call a new request, req.session is completely reset with nothing.
Here is some code from my application:
Express- server.js [my setup for express-session and cors]
app.use(cors({
credentials: true
}))
const session = require('express-session')
// Middleware for creating sessions and session cookies.
// A session is created on every request
app.use(session({
secret: 'tis a secret mate',
cookie: {
expires: 3000, // expires in 15 mins
httpOnly: true,
secure: false,
},
// Session saving options
saveUnintialized: false, // don't save the initial session if the session object is unmodified (i.e the user did not log in)
resave: true, // don't resave a session that hasn't been modified
store: MongoStore.create({
mongoUrl: process.env.MONGODB_URI_SESSIONS
})
}))
app.use(function (req, res, next) {
console.log('SESSION LOGGING MIDDLEWARE')
console.log(req.session);
next()
});
app.use((req, res, next) => {
res.header('Access-control-Allow-Origin', 'http://localhost:3000');
res.header(
"Access-Control-Allow-Headers",
"Origin, X-Requested-With, Content-Type, Accept, Authorization"
);
res.header('Access-Control-Allow-Credentials', true);
next();
});
EDIT - Login Route
app.post('/api/users/login', async (req, res) => {
// pull out the body
const body = req.body
// pull out the username and password
const username = body.username
const password = body.password
User.findByUsernamePassword(username, password)
.then(user => {
// if we find the user, the users information to the session to retain all that information
// will create a function to ensuree that the session exists to make sure that we are logged in
req.session.user = user
req.session.username = user.username
req.session.save()
console.log(req.session)
res.send({ user: req.session.user })
})
.catch(error => {
res.status(400).send()
});
})
Front-end Fetch Calls
In the code below, I pasted my login and check-session calls to their respective endpoints. Essentially the check session call just returns what is in the session, and the login call is supposed to login the user and add the user to req.session.user
After logging in, I try to run check-session to see if the user is in the session, but it is not there every time. I also notice that the cookie in my applications tab for chrome changes to something else.
export const login = (username, password, setUser) => {
const obj = {
username: username,
password: password
}
const request = new Request(`${API_HOST}/api/users/login`, {
method: "POST",
credentials: "include",
body: JSON.stringify(obj),
headers: {
"Content-Type": "application/json"
}
})
// send the request
const promise = fetch(request)
.then(res => {
if (res.status === 200) {
return res.json();
}
})
.then(json => {
// if the user exists, setUser to user
console.log("USER PRE:", json.user)
if (json.user !== undefined) {
console.log("USER: ", json.user)
setUser(json.user)
return json.user
}
})
.catch(error => {
console.log(error);
})
return promise
}
export const checkSession = () => {
const url = `${API_HOST}/api/users/check-session`
fetch(url, {
credentials: 'include'
})
.then(res => {
if (res.status === 200) {
console.log('200')
console.log(res.json())
} else {
console.log(res)
}
})
// .then(json => {
// if (json) {
// setUser(json)
// }
// })
.catch(error => {
console.log(error);
});
}
Things I've Tried
I've tried changing things to how my cookie is defined in server.js (secure: false | httpOnly: true)
I've tried adding credentials to my fetch calls and accepting them in cors in server.js
I changed my chrome to disable-web-security
I added cors access control stuff to the response header as seen above
Additional notes that might be helpful
I'm using React with React Router, not sure if that would affect stuff
Thank you for your time, I know this is a super long question. Please let me know if there is anything else I could provide to help clarify if you want to help!

If you're running the backend and frontend on different hosts, there could be a CORS problem. Also you said that you checked the cookie in the application tab, but if you haven't tried looking at the request and response cookie headers in the network tab, you should check those out to further diagnose the problem. The cookie should be set on the authentication request, and it should be included in the requests following that.

HttpOnly Cookies not found in Web Inspector

I am working on user authentication for a website built using the MERN stack and I have decided to use JWT tokens stored as HttpOnly cookies. The cookie was sent in a "Set-Cookie" field in response header when I used Postman to make the request but not in the Safari Web Inspector as shown in the image below. There are no cookies found in the storage tab either.
I have simplified my React login form to a button that submits the username and password of the user for the sake of debugging
import React from "react";
const sendRequest = async (event) => {
event.preventDefault();
let response;
try {
response = await fetch("http://localhost:5000/api/user/login", {
method: "POST",
body: { username: "Joshua", password: "qwerty" },
mode: "cors",
// include cookies/ authorization headers
credentials: "include",
});
} catch (err) {
console.log(err);
}
if (response) {
const responseData = await response.json();
console.log(responseData);
}
};
const test = () => {
return (
<div>
<input type="button" onClick={sendRequest} value="send" />
</div>
);
};
export default test;
I am using express on the backend and this is my index.js where all incoming requests are first received
const app = express();
app.use(bodyParser.json());
app.use("/images", express.static("images"));
app.use((req, res, next) => {
res.set({
"Access-Control-Allow-Origin": req.headers.origin,
"Access-Control-Allow-Credentials": "true",
"Access-Control-Allow-Headers": "Content-Type, *",
"Access-Control-Allow-Methods": "GET, POST, PATCH, DELETE",
});
next();
});
app.use(cookieParser());
// api requests for user info/ login/signup
app.use("/api/user", userRoutes);
This is the middleware that the login request is eventually directed to
const login = async (req, res, next) => {
const { username, password } = req.body;
let existingUser;
let validCredentials;
let userID;
let accessToken;
try {
existingUser = await User.findOne({ username });
} catch (err) {
return next(new DatabaseError(err.message));
}
// if user cannot be found -> username is wrong
if (!existingUser) {
validCredentials = false;
} else {
let isValidPassword = false;
try {
isValidPassword = await bcrypt.compare(password, existingUser.password);
} catch (err) {
return next(new DatabaseError(err.message));
}
// if password is wrong
if (!isValidPassword) {
validCredentials = false;
} else {
try {
await existingUser.save();
} catch (err) {
return next(new DatabaseError(err.message));
}
userID = existingUser.id;
validCredentials = true;
accessToken = jwt.sign({ userID }, SECRET_JWT_HASH);
res.cookie("access_token", accessToken, {
maxAge: 3600,
httpOnly: true,
});
}
}
res.json({ validCredentials });
};
Extra information
In the login middleware, a validCredentials boolean is set and returned to the client. I was able to retrieve this value on the front end hence I do not think it is a CORS error. Furthermore, no errors were thrown and all other API requests on my web page that do not involve cookies work fine as well.
Another interesting thing is that despite using the same data (A JS object containing {username:"Joshua", password:"qwerty"}) for both Postman and the React code, validCredentials evaluates to true in Postman and false in the Web Inspector. It is an existing document in my database and I would expect the value returned to be true, which was the case before I added cookies
May I know what I have done wrong or do you have any suggestions on how I can resolve this issue? I am a beginner at web-development
EDIT
With dave's answer I can receive the "Set-Cookie" header on the frontend. However it does not appear in the Storage tab in the web inspector for some reason.
This is the response header
This is the Storage tab where cookies from the site usually appears

If you're trying to send the request as json, you need to set the content type header, and JSON.stringify the object:
response = await fetch("http://localhost:5000/api/user/login", {
method: "POST",
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ username: "Joshua", password: "qwerty" }),
mode: "cors",
// include cookies/ authorization headers
credentials: "include",
});
Right now you're probably getting the equivalent of
existingUser = User.findOne({ username: undefined})
and so when you do:
if (!existingUser) {
validCredentials = false;
} else { /* ... */ }
you get the validCredentials = false block, and the cookie is set in the other block.

You can not see it because you have made it httpOnly cookie.

Axios HTTP requests returns into an error (Access-Control-Allow-Origin)

I'm trying to make http post requests with Axios in JavaScript. The request was working fine, but then I tried to use cookies. As my backend I'm using an Express/Nodejs Server on http://localhost:8000, while my frontend is a react npm test server on http://localhost:3000.
My backend looks like this:
const express = require('express');
const cookieparser = require('cookie-parser');
const cors = require('cors');
const app = express();
app.use(cookieparser());
app.use(cors());
app.post("/request/status/check", (req, res) => {
if(req.cookies.gitEmployee != null){
res.status(200).send({res: 1, employeeName: req.cookies.gitEmployee.username, fullname: req.cookies.gitEmployee.fullname});
} else if(req.cookies.gitCompany != null){
res.status(200).send({res: 2, companyName: req.cookies.gitCompany.companyName, fullname: req.cookies.gitCompany.fullname});
}else{
res.status(200).send({res: 0});
}
});
app.post("/request/testcookie", (req, res) => {
res.cookie("gitEmployee", null);
res.cookie("gitEmployee", {
username: "testusername",
fullname: "Test Username"
}).send({res: 1});
});
So, as a short description: I'm setting a test cookie by posting a request to http://localhost:8000/request/testcookie. The response should be an JSON object where res = 1. Also, I'm trying to get information out of the cookie by posting a request to http://localhost:8000/request/status/check. In this case the response should be the object {res:1 , employeeName: "testusername", fullname: "Test Username"}.
I tried this concept with a REST Client called Insomnia (something like Postman) and it worked perfectly.
Then I wrote a helper-class for my React Application and for the Http request I'm using Axios.
import axios from 'axios';
class manageMongo {
authstate(){
return new Promise((resolve, reject) => {
axios("http://localhost:8000/request/status/check", {
method: "post",
data: null,
headers: {
"Access-Control-Allow-Origin": "*"
},
withCredentials: true
})
.then(res => {
console.log(res.data);
if(res.data.res === 0){
resolve(false);
}
if(res.data.res === 1){
resolve(true);
}
if(res.data.res === 2){
resolve(true);
}
});
});
}
setTestCookie(){
axios("http://localhost:8000/request/testcookie", {
method: "post",
data: null,
headers: {"Access-Control-Allow-Origin": "*"},
withCredentials: true
})
.then(res => { console.log(res)});
}
}
export default manageMongo.prototype;
When I execute these functions, I'm getting the same error of both of them (of course with different urls):
Failed to load http://localhost:8000/request/testcookie: 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'
I already know that it's because of the withCredentials setting in the requests. I added these settings because I want to pass cookies through these requests and if I don't add withCredentials, the /request/status/check request always returns {res: 0} even if I set a cookie before.
I don't know, if this will change if the I set withCredentials = true but i read that in multiple threads. If you know an other working method to pass cookies through these requests even without axios please share it here! Because that is, what I want to achieve.

The problem seems to be you have set
'Access-Control-Allow-Origin': *
Try setting it to your actual origin, for example
'Access-Control-Allow-Origin': 'http://localhost:8000'
or
'Access-Control-Allow-Origin': 'http://localhost:3000'
Whichever the request originates from.