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

Error: read ECONNRESET in request with Token in nodejs

I have a small API made in nodejs with express. A while ago I did not touch it and everything worked perfectly. Only now have I decided to implement JsonWebToken. In Postman, the login works fine, however, when trying to send the token as a header in a request I get an error. When i don't send the token in the request, response successfull (obviously since there is no token, the endpoint returns a 401 to me).
If I try to do it after authenticating (saving the token in an environment variable) and this time assigning it to the header, the following happens
If I send anything if it works, apparently it has to do with the length of the token.
I have tried it outside of postman, and the same thing happens, so the error does not seem to be from postman.
I don't know how to solve the problem, apparently nodejs does not handle the request by the length of the token.Is there a way to expand that?
The nodejs server entry point is:
// Enviroment process
require("dotenv").config();
// Body Parser
const bodyParser = require("body-parser");
const cors = require("cors");
// Express server
const app = require("express")();
app.use(cors());
// BodyParser middleware
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
// Routes middleware
app.use(require("./routes/index"));
// Run server
app.listen(process.env.PORT, () => {
console.log(`Escuchando en el puerto ${process.env.PORT}`);
});
Routes:
const express = require("express");
const { checkToken } = require("../middlewares/authentication");
const app = express();
/// Base Routes
app.get(
"/equipments",
[checkToken],
require("../controllers/equipment/get_all.controller")
);
module.exports = app;
The checkToken middleware:
const jwt = require("jsonwebtoken");
const checkToken = (req, res, next) => {
const token = req.get("token") || req.query.token;
jwt.verify(token, process.env.SEED, (err, decoded) => {
if (err) {
return res.status(401).json({
ok: false,
error: {
message: "Invalid Token",
},
});
}
req.user = decoded.user;
next();
});
};
module.exports = {
checkToken,
};
The .env variables:
// Node env (development | production)
NODE_ENV=development
// Server Port
PORT=3000
// Token Time Expiration
TOKEN_EXPIRES=48h
// Token Seed
SEED=exampleseed
UPDATE
When I send the token through the body of the request, the error does not occur, and everything works correctly (obviously changing the middleware so that it receives it by the body). The problem is when I send it by headers or a query parameter.
const checkToken = (req, res, next) => {
// const token = req.get("token") || req.query.token;
const token = req.body.token;
jwt.verify(token, process.env.SEED, (err, decoded) => {
if (err) {
return res.status(401).json({
ok: false,
error: {
message: "Invalid Token",
},
});
}
req.user = decoded.user;
next();
});
};
UPDATE AND SOLUTION:
After trying only those files, I realized that the error did not come from these. The problem was in the authentication. When creating the token I used the information of the logged in user, however, I had not realized that it had a base64 image field.
// ... after login, user object contains object information
let token = jwt.sign(
{
user: {
id: user.id,
name: user.name,
image: user.image.base64Url
},
},
process.env.SEED,
{ expiresIn: process.env.TOKEN_EXPIRES }
);
The length of the base64 image made the token extremely long. Then when making the request and sending a string token with many characters, the reading error occurrs (Error: read ECONNRESET).
The solution was to ignore the image field when creating the token.
Finally, before an error of the same type, check that a field that contains too much information is not being sent.

nodejs - Set-Cookie present in response but missing in browser

I'm working with express.js and passport.js as my backened with axios and vue.js as my frontend.
I can see my set-cookie but the cookie is not present in my browser. Pictures linked below.
Response headers
Request headers
This cookie is used to authenticate my user using passport.js.
The following is the code for my express.js.
var app = express();
app.use(cors({
origin: "http://localhost:8080",
credentials: true
}));
app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({
extended: false
}));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use(session({
secret: 'p#ssw0rd'
}));
app.use(passport.initialize());
app.use(passport.session());
The method below will be called through vue.js methods.
const url = "http://localhost:3000/";
let axiosConfig = {
withCredentials: true,
headers: {
'Content-Type': 'application/json',
'Access-Control-Allow-Origin': 'http://localhost:3000/',
'Access-Control-Allow-Methods': 'GET,PUT,POST,DELETE'
}
}
class user {
static login(username, password) {
return new Promise(async(resolve, reject) => {
try {
const res = await axios.post(
`${url}login`, {
username,
password
},
axiosConfig
);
resolve(res.data);
} catch (err) {
reject(err);
}
});
}
Backend is run at localhost:3000 and frontend is run at localhost:8080
Inspecting cookies.
No data presented for selected host

I found the answer to my question and the solution is really stupid, nothing code related.
Since I am working on expressjs and a friend works on vuejs, he added two of the same folder that contains the axios methods. I changed the part which is not referenced.
The code I posted in my question works.

I encountered a problem while working on my project on MERN Stack

I encountered a problem while working on my project on MERN Stack.
My React app is running on port 3000 and express api on 5000. What I encountered is, while adding 0auth functionality using redux, I am getting error like "Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource here. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing)."
Now the structure of my logic is like :
I have defined google strategy for passport. Defined routes in express route (http://localhost:5000/api/user/auth/google) and callback url (http://localhost:5000/api/user/auth/google/callback). Now when I am directly accessing "http://localhost:5000/api/user/auth/google", I am able to complete process, but when I am calling it through reducers from react app, I am getting above mentioned error.
My code is the following:
// Routes
router.get(
"/auth/google",
passport.authenticate("google", {
scope: ["profile", "email"]
})
);
router.get(
"/auth/google/callback",
passport.authenticate("google", {
failureRedirect: "/",
session: false
}),
function(req, res) {
var token = req.user.token;
console.log(res);
res.json({
success: true,
token: 'Bearer ' + token,
});
}
);
//Reducers Action
export const googleLoginUser = () => dispatch => {
axios
.get('api/users/auth/google')
.then((res) => {
//save to local Storage
const {
token
} = res.data;
// Set token to local storage
localStorage.setItem('jwtToken', token);
//set token to auth header
setAuthToken(token);
// Decode token to get user data
const decoded = jwt_decode(token);
console.log(decoded);
// set current user
dispatch(setCurrentUser(decoded));
})
.catch(err => {
console.log(err);
dispatch({
type: GET_ERRORS,
payload: err.response.data
})
}
)
}

Allow CORS by using middleware for Express. Install CORS with npm install cors. Import CORS import cors from 'cors'. Use middleware with app.use(cors()) if your Express-instance is called app.
Example:
import express from 'express';
import cors from 'cors';
const app = express();
app.use(cors());
Let me know if it solves the problem