'Acces to XMLHttpRequest at 'https://api-link/login' from origin 'http://localhost/3000' has been blocked by cors policy. (React, , firebase, JWT))
When I try to implement a secure login system in React application with firebase using JSON Web Token (JWT) I am getting this error: Acces to XMLHttpRequest at 'https://api-link/login' from origin 'http://localhost/3000' has been blocked by cors policy. I am using node js for the backend.
I also use cors middleware:
const cors = require("cors");
app.use(cors());
My Backend Code:
const verifyJWT = (req, res, next) => {
const authHeader = req.headers.authorization;
console.log(authHeader);
if (!authHeader) {
return res.status(401).send({
message: "unauthorized access",
});
}
const token = authHeader.split(" ")[1];
jwt.verify(token, process.env.ACCESS_TOKEN_SECRET, (err, decoded) => {
if (err) {
return res.status(403).send({ message: "forbidden access" });
} else {
console.log("decoded", decoded);
req.decoded = decoded;
next();
}
});
};
Backend login route
app.post("/login", async (req, res) => {
const user = req.body;
const accessToken = jwt.sign(user, process.env.ACCESS_TOKEN_SECRET, {
expiresIn: "1d",
});
res.send({ accessToken });
});
My Client-side code:
const handleSubmit = async (e) => {
e.preventDefault();
await signInWithEmailAndPassword(values.email, values.password);
const email = values.email;
const { data } = await axios.post(
"https://stark-sands-89628.herokuapp.com/login",
{ email }
);
localStorage.setItem("accessToken", data.accessToken)};
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
