404 not found (API url not found even though it 100% exists) - javascript

I'm trying to get a product by id. Now when I tried this with postman it worked perfectly fine no problems whatsoever. But, when I tried to get the data with Angular it didn't work it keeps saying 404 not found I don't know what's the problem. Please if anyone knows tell me. Any help will be appreciated. Here's my code.
express.js:
route:
router.get("/get-product/:id", async (req, res) => {
await fetchProductById(req, res);
});
utils:
const fetchProductById = async (req, res) => {
const id = req.params.id;
const prod = await Product.findOne({_id: id});
if (prod) {
if (prod.length == 0)
res.status(200).json({
message: "No Products",
success: true,
});
else {
res.status(200).json({
prod,
success: true,
});
}
} else {
res.status(400).json({
prod,
message: "couldn't find any product",
id: req.id,
success: false,
});
}
};
Angular:
now the angular service:
getProductById(id: any){
return this.http.get<Products[]>(
environment.api + "products/get-product?id="+id
)
}
subscribing to the service inside a component:
let id = this.route.snapshot.params.id;
this._product.getProductById(id).subscribe(
(data: Products[])=>{
console.log(data)
},
error => {
console.log("there has been an error trying to fetch this product: "+id)
}
)

You used a query parameter instead of an url parameter. It should be "products/get-product/"+id:
getProductById(id: any){
return this.http.get<Products[]>(
environment.api + "products/get-product/"+id
)
}

Related

How to make modular express requests?

I want to reuse a code snippet which will save me A WHOLE LOT OF TIME. I want to make POST, DELETE, PATCH and GET requests modular.
I have a js File which defines the basic route for each module (mod) and since I'm using 23 modules, which will all function the same way, I'd like to take this shortcut. Heres the "Basic Route File"
let route = "";
let mod = undefined;
router.get("/" + route, verify, async (req, res) => {
const id = req.query.id;
let data;
if (id) {
data = await mod.findOne({_id: id});
} else {
data = await mod.find({});
}
if (data)
return res.status(200).json({status: 404, message: "The data can't be found!", data: []});
else
return res.status(200).json({status: 200, message: "Found data!", data: data});
});
router.post("/" + route, verify, async (req, res) => {
let data = new mod(req.body);
data = await data.save();
if (data)
return res.status(200).json({status: 404, message: "The data can't be found!", data: []});
else
return res.status(200).json({status: 200, message: "Found data!", data: data});
});
router.patch("/" + route, verify, async (req, res) => {
const id = req.query.id;
let data;
if (id) {
data = await mod.updateOne({_id: id}, {$set: req.body});
}
if (!data)
return res.status(200).json({status: 404, message: "The data can't be found!", data: []});
else
return res.status(200).json({status: 200, message: "Found data and updated!", data: data});
});
router.delete("/" + route, verify, async (req, res) => {
const id = req.query.id;
let data;
if (id) {
data = await mod.deleteOne({_id: id});
}
if (!data)
return res.status(200).json({status: 404, message: "The data can't be found!", data: []});
else
return res.status(200).json({status: 200, message: "Found data and deleted!", data: data});
});
module.exports = function(proute, pmodule){
route = proute;
module = pmodule;
return router;
};
And in one of the other router files I tell each route which module they are using and what they are called.
router.use(yukir("disc-server", DiscServer));
router.use(yukir("disc-user", User));
router.use(yukir("autochannel", AutoChannel));
The thing is I don't get any errors but a 404 error so the route can't be found, which is really strange. Can someone help me with that?
Your problem is that strings in Javascript are pass by value, not pass by reference, so at the time the calls to the router methods are made, route and mod are the empty string and undefined respectively. The router functions thus always register the route at "/". Wrap your route definition code inside the factory function and you'll be fine.

How to handle 401 error status code error in Node.js/Express?

I am working on login functionality in my project, now, flow looks like this (from front-end to back-end):
async login() {
await login({
password: this.userPassword,
login: this.userLogin,
twoFactor: this.twoFactor
}).then((res) => {
if (res.error) {
//
} else {
console.log(res)
}
})
}
And here is starts problems, as you can see if something goes wrong, I return status code 401 and some error message. When I login with correct data, there is no problem with getting token, but when I provide wrong data I have external pending login endpoint in development tools in browser and then, after some time, Error: Request failed with status code 401 in front end terminal. Without this status(401) with just JSON it works fine, but when I try to add 401 code, application crashes.
const userService = require('./../services/userService')
const crypto = require('./../services/cryptoService')
const jwt = require('./../services/jwtService')
const twoFactorService = require('node-2fa')
module.exports = {
login: async (req, res) => {
let { login, password, twoFactor } = req.body
password = crypto.encrypt(password, process.env.APP_KEY)
const result = await userService.getUserToLogin(login, password)
if (!result) {
res.status(401).json({
error: 'Unauthorized'
})
} else {
const faCode = result.twofatoken
const result2F = twoFactorService.verifyToken(faCode, twoFactor);
if ( !result2F || result2F.delta !== 0 ) {
res.status(401).json({
error: 'Unauthorized'
})
} else {
const userId = crypto.encrypt(result.id, process.env.CRYPTO_KEY)
const token = await jwt.sign({
uxd: userId,
});
res.json(token);
}
}
}
}
Actually, I have no idea on what to do with that and how to handle this error.
Ok, here is the answer. Actually, you just need to handle this error in your router:
router.post('/login', async (req, res) => {
try {
const data = await api.post('/login', req.body)
res.json(data.data)
} catch (e) {
// Probably you have here just console.log(e), but this way, you can handle it
res.status(e.response.status).json(e.response.data)
}
})

Node JS throwing cannot set headers after they are sent to the client, after using mongoose.removeOne

I have a method that deletes products and before it does it check if the user who is trying to delete the product is the user who created it. When i execute it with Insomnia it successfully removes the product but i get an error on the console saying cannot set headers after they are sent to the client.
My method:
exports.deleteProduct = (req, res) => {
const id = req.params.productId;
Product.deleteOne({ _id: id, userId: req.user._id }, () => {
return res.status(401).json("Not authorized");
})
.then(() => {
return res.status(200).json("Product deleted");
})
.catch((err) => {
return res.status(500).json({
error: err,
});
});
};
I'm pretty sure this is happening because I'm chaining a .then() and .catch() after executing it.
I tried to do this but it didn't work because the err parameter that I'm sending to the callback function is null.:
exports.deleteProduct = (req, res) => {
const id = req.params.productId;
Product.deleteOne({ _id: id, userId: req.user._id }, (err) => {
if (err) {
return res.status(401).json("Not authorized");
}
return res.status(200).json("Product deleted");
});
};
When i tried this second approach I always got the 200 status, meanwhile the product didn't delete.
Any idea how to deal with this?
You can try something like this:
Product.deleteOne({ _id: id, userId: req.user._id }, (err, result) => {
if(err) {
return "something"
}
return "something else"
});
or: in async / await way
try {
await Product.deleteOne({ _id: id, userId: req.user._id });
} catch (err) {
// handle error here
}
By the way, why you are passing userId at the deleteOne method?

NodeJS user authentication with JWT

I am just started with nodejs with react frontend. But I have some issue while authenticating user. I am trying to fetch user with specific email and password. My api for this is as follows:
I have created three files controller, services and router files for any api request.
//userServices.js
const db = require('./../../db-connection/connection')
userAuth: (params, callback) => {
db.query(`SELECT * FROM Users WHERE email = ?`,[params.email],
(error, result, fields) => {
if(!error) {
console.log('result = ' + result[0]);
return callback(error, result[0])
}
else
return callback(error)
});
}
And this is my userController js file.
//userController.js
const {create, userindex, userAuth} = require('./UserServices');
const {genSaltSync, hashSync, compareSync} = require('bcrypt');
const {sign} = require('jsonwebtoken');
userLoginAuth: (req, res) => {
const body = req.body;
userAuth(body, (error, results) => {
if (error)
console.log(error);
if (!results) {
return res.json({
success: 0,
data: 'Invalid email or password'
})
}
const result = compareSync(body.password, results.password);
if(!result) {
results.password = undefined;
const jsontoken = sign({result: results}, 'choegyel123', {
expiresIn: '1h'
});
return res.json({
success: 1,
message: 'Login successful',
token: jsontoken
})
} else
console.log('password' + result.password)
return res.json({
success: 0,
error: 'Invalid email or password'
});
});
}
But the problem is in userServices.js file. My sql query is correctly executed but in callback for the ' results ' i am getting weird object. I think I should get some array of corresponding data from the database table and in my console log I am getting [object object]. I am not sure what does this actually mean and I am also all sure this is a blocker, since I cannot retrive password with this object in my userController. Any help would be greatly appreciated. Thanks!
Issues
compareSync returns a boolean with true indicating correct password. You're using if(!result) which is the reverse.
Make sure your {} are correct on the else
You're logging result.password which is undefined because result is your compareSync return value. You meant to log results.password. Avoid using result and results for two different things because it makes it easy to make these mistakes. Something like bcryptResult and resultObj might be better.
When you console.log(), pass data as the second argument or make a second log because concatenating objects always shows [object Object].
Updated snippet
const result = compareSync(body.password, results.password);
if(result) {
results.password = undefined;
const jsontoken = sign({result: results}, 'choegyel123', {
expiresIn: '1h'
});
return res.json({
success: 1,
message: 'Login successful',
token: jsontoken
})
} else {
console.log('password', results.password)
return res.json({
success: 0,
error: 'Invalid email or password'
});
}

window location replace works only one time

This is very complicated term for me because i am confused how things are done. I have React & Express application where you can upload data and when you upload it will redirect you to other page where your data is displayed, but problem is that it only redirects you one time and when you go back to main page and try to upload file second time it is not uploaded and whole application crashes
here is recipe.js file (part of it) (react)
axios({
method: 'post',
url: '/api/recipes',
config: {headers: {'Content-Type': 'multipart/form-data' }},
data: data
})
.then(res => {
window.location.replace(res.data.location)
})
.catch(err => {
if(err.response){
if(err.response.data.redirect === true){
window.location.replace(err.response.data.location)
}
if(err.response.data.message){
alert(err.response.data.message)
}
}
});
recipe.js (part of it)(expressjs)
const recipe = await Dish.create({
author: user.username,
name: name,
//properties and values
})
return res.status(200).send({
location: '/recipe/' + recipe.name + '/' + recipe._id
})
view-recipe.js (express (part))
componentDidMount(){
const { match: { params } } = this.props;
console.log(`/api/recipe/${params.dishName}/${params.id}`)
axios.get(`/api/recipe/${params.dishName}/${params.id}`)
.then(res => res.data)
.then(data =>{
console.log(data)
}).catch(err=>{
if(err.response.data.message){
alert(err.response.data.message)
}
})
}
view-recipe.js (express)
router.get('/:dishName/:id', async (req, res) => {
try {
const name = req.params.dishName;
const id = req.params.id;
console.log('name ' + name + ' id ' + id)
const recipe = await Dish.findOne({
name: name,
_id: id
}).lean();
if (!recipe) {
return res.status(404).send({
message: 'recipe not found'
})
}
return res.status(200).send({
recipe
})
} catch (err) {
return res.status(500).send({
message: err.message
})
}
})
and finally
index.js (express, for where is guard determinig whether jwt validation token is expired or not and route configurations )
router.use('/api/recipes', guardr, require('./recipe'))
router.use('/api/recipe', require('./view-recipe'))
What is wrong with this code? By the way, before window.location.replace() in recipe.js file (client) i had window.location.href instead and it worked 2 times. it is really confusing for me because i am doing this difficult project for the first time. Thanks!

Categories

Resources