I am encountering a CORS error when making a request from the React frontend to update the user password using the updatePassword endpoint on the backend. The error message returned in the browser console is:
Response {type: 'cors', url: 'url: 'https://snap-stay-backend.vercel.app/users/updatePassword'}
Steps to Reproduce:
Set up the React frontend on localhost by cloning this repo : https://github.com/Rahulkaradwal/Snap-Stay
or use this https://snapstay-bay.vercel.app/login (credentials - admin@gmail.com, admin@123 or just Singup)
Set up the backend API server by cloning this repo : https://github.com/Rahulkaradwal/snapStay-backend
Use the UpdatePasswordForm component from the React frontend to attempt a password update.
Observe the CORS error in the browser console.
Expected Behavior:
The password should be successfully updated, and a success message should be displayed to the user.
Actual Behavior:
A CORS error occurs, preventing the request from being completed. The browser blocks the request with the error:
Backend (Express API) - updatePassword function:
``
exports.updatePassword` = (Modal) => {
return catchAsync(async (req, res, next) => {
const { oldPassword, password, confirmPassword } = req.body;
if (!password || !oldPassword || !confirmPassword) {
return next(
new AppError('Please provide all required password fields', 401)
);
}
const user = await Modal.findById(req.user._id.toString()).select('+password');
if (!user) {
return next(new AppError('Something went wrong! User not found', 401));
}
if (!(await user.comparePassword(oldPassword, user.password))) {
return next(
new AppError('Unauthorized! Please enter your current password', 401)
);
}
// Check if new password and confirm password match
if (password !== confirmPassword) {
return next(new AppError('Passwords do not match', 400));
}
user.password = req.body.password;
user.confirmPassword = undefined;
await user.save();
const token = SignToken(user._id);
res.status(200).json({
status: 'success',
token,
data: {
user,
},
});
});
};
``
Frontend (React) - updatePasswordApi function:
``
export async function updatePasswordApi(userData) {
const token = localStorage.getItem('authToken');
try {
const response = await fetch(${URL}/users/updatePassword, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${token}`,
},
body: JSON.stringify(userData),
});
if (!response.ok) {
console.log(response);
throw new Error('Sorry! Could not update the user');
}
const data = await response.json();
return data;
} catch (err) {
console.log(err);
throw new Error('Sorry! Could not update the user');
}
}
``
Feel free to adjust the URL and any specific details to better fit your project setup and configuration.
I am encountering a CORS error when making a request from the React frontend to update the user password using the updatePassword endpoint on the backend. The error message returned in the browser console is:
Response {type: 'cors', url: 'url: 'https://snap-stay-backend.vercel.app/users/updatePassword'}
Steps to Reproduce:
Set up the React frontend on localhost by cloning this repo : https://github.com/Rahulkaradwal/Snap-Stay
or use this https://snapstay-bay.vercel.app/login (credentials - admin@gmail.com, admin@123 or just Singup)
Set up the backend API server by cloning this repo : https://github.com/Rahulkaradwal/snapStay-backend
Use the UpdatePasswordForm component from the React frontend to attempt a password update.
Observe the CORS error in the browser console.
Expected Behavior:
The password should be successfully updated, and a success message should be displayed to the user.
Actual Behavior:
A CORS error occurs, preventing the request from being completed. The browser blocks the request with the error:
Backend (Express API) - updatePassword function:
``
exports.updatePassword` = (Modal) => {
return catchAsync(async (req, res, next) => {
const { oldPassword, password, confirmPassword } = req.body;
});
};
``
Frontend (React) - updatePasswordApi function:
``
export async function updatePasswordApi(userData) {
const token = localStorage.getItem('authToken');
try {
const response = await fetch(
${URL}/users/updatePassword, {method: 'POST',
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${token}`,
},
body: JSON.stringify(userData),
});
} catch (err) {
console.log(err);
throw new Error('Sorry! Could not update the user');
}
}
``
Feel free to adjust the URL and any specific details to better fit your project setup and configuration.