Develop Reference

getting "unexpected end of file" axios error while making a get request in this small nodejs app

I have been getting this error in this small nodejs app while trying to learn using axios on the backend to make request. "unexpected end of file".
axios request file
import axios from "axios";
export const getData = async () => {
let data;
try {
const response = await axios.get(
"https://jsonplaceholder.typicode.com/users"
);
console.log(response);
data = response;
} catch (error) {
console.log(error.message);
return;
}
return data;
};
server.js
import express from "express";
import cors from 'cors';
import axios from "axios";
import { getData } from "./utils/getData.js";
const app = express();
app.use(cors());
app.use(express.json());
app.get("/", async (req, res) => {
let users;
users = await getData();
res.send(users);
})
app.listen(5000, () => {
console.log("server listening at port 5000");
})

You can add below header encoding to your request.
axios.get("url", {
headers: { "Accept-Encoding": "gzip,deflate,compress" }
});

the Brotli decompression bug was fixed in v1.2.2

Bro, go to Package.json--> in dependencies --> check for axios ---> Add 'axios' : '1.1.3'.
This will solve your issue.

Receiving 404 Error from Axios post request to MongoDB

I am working on a MERN stack project for a proof-of-concept and am creating a wall where I can add posts from a form. The form accepts name, tags, title, and a message along with an image. Upon clicking submit, Axios gives me a 404 error in the console.
For example, trying to POST this data (using a mongoose schema):
{creator: 'asdfasddd', title: 'asdfasd', message: 'asdffdd', tags: 'dddd', selectedFile: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA0gA…AAAAAAAAAAAAAAAAAYI+9AisfoxArdwtiAAAAAElFTkSuQmCC'}
And I receive this error message:
{message: 'Request failed with status code 404', name: 'AxiosError', code:
'ERR_BAD_REQUEST', config: {…}, request: XMLHttpRequest, …}
This is the AxiosError expanded only once, I can expand the error further if that would help, I've looked through it an found nothing in particular that seems helpful.
[
If somebody could tell me why I am getting this error besides the fact that I am timing out and what would cause me to that would be helpful. One note to help is that I receive some interaction to my DB just no data (of course). My POST functions are here if that helps as well, but I don't believe that is wrong either. If I need to post my the code to my component itself let me know.
import * as api from '../api';
// Action Creators
export const getPosts = () => async (dispatch) => {
try {
const { data } = await api.fetchPosts();
dispatch( {type: 'FETCH_ALL', payload: data });
} catch (error) {
console.log(error.message);
}
}
export const createPost = (post) => async (dispatch) => {
try {
const {data } = await api.createPost(post);
dispatch({type: 'CREATE', payload: data});
} catch (error) {
console.log(post);
console.log(error.toString());
console.log(error);
}
}
Code for POSTS for the back end in my controllers folder.
import PostMessage from '../models/postMessage.js';
export const getPosts = async (req, res) => {
try {
const postMessages = await PostMessage.find();
console.log(postMessages);
res.status(200).json(postMessages);
} catch (error) {
res.status(404).json({ message: error.message});
}
}
export const createPost = async (req, res) => {
const post = req.body;
const newPost = new PostMessage(post);
try {
await newPost.save();
res.status(201).json(newPost);
} catch (error) {
res.status(409).json({ message:error.message});
}
}
Within api folder:
import axios from 'axios';
const url = 'http://localhost:5000/posts';
//const port = process.env.PORT;
//const url = 'http://localhost:3000/posts';
export const fetchPosts = () => axios.get(url);
export const createPost = (newPost) => axios.post(url, newPost);
How the data is routed server-side:
import express from 'express';
import { getPosts, createPost } from '../controllers/posts.js';
const router = express.Router();
//http://localhost:5000/posts
router.get('/', getPosts);
router.get('/', createPost);
export default router;

In your router file, you are missing the POST method
router.post('/', createPost);
In your main file, it should be
app.use("/posts", postRouter)

React axios.get 401 unauthorized

I used the postman for testing my url,and it has response data(It's correct).
Url:http://localhost:8000/api/products/find/6337d5d73ec2c05d7c11bc63(ProductId).
In postman,it could get response data.
I wonder I do give it Bearer token in my requestMethods.js,which imported in /pages/Product.jsx.
But when I use the same id in axios.get,it said error:
Error:GET http://localhost:8000/api/products/find/6337d5d73ec2c05d7c11bc63 401 (Unauthorized)
can someone just help me solve this question?
In /pages/product.jsx line 145,157 are got tag in the photo.
Here are my relative Codes:
requestMethods.js
import axios from "axios";
const BASE_URL = "http://localhost:8000/api/"
const TOKEN = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9......"
export const publicRequest = axios.create({
baseURL: BASE_URL,
});
export const userRequest = axios.create({
baseURL: BASE_URL,
headers: { token: `Bearer ${TOKEN}` },
});
/pages/Product.jsx
It's mainly codes of website.
import { useLocation } from 'react-router-dom'
import { useState, useEffect } from 'react';
import { publicRequest,userRequest } from './requestMethods';
const Product = () => {
// 回傳路徑
const location = useLocation();
const id = location.pathname.split("/")[2];
const [product, setProduct] = useState({});
useEffect(() => {
const getProduct = async () => {
try {
const res = await publicRequest.get("/products/find/" + id);//HERE USE REQUESTMETHODS.JS and it's it sad line:145
console.log(res.data)
setProduct(res.data);
}
catch { } }
getProduct();//line 157
}, [id])
}
export default Product
index.js
const express = require("express");
const app = express();
const mongoose = require("mongoose");
const dotenv = require("dotenv");
const userRouter = require("./routes/user");
const authRouter = require("./routes/auth");
const productRouter = require("./routes/product");
const cors=require("cors");
dotenv.config();
mongoose.connect(
process.env.MONGO_URL)
.then(() => console.log("connect"))
.catch(((err) => {
console.log(err);
}));
app.use(express.json());
app.use(cors());
app.use("/api/users", userRouter);
app.use("/api/auth", authRouter);
app.use("/api/products", productRouter);//USE THE ROUTES/PRODUCT.JS
app.use("/api/orders", orderRouter);
app.use("/api/cart", cartRouter);
app.use("/api/checkout",stripeRouter)
app.listen(process.env.PORT || 8000, () => {
console.log("Run server")
})
routes/product.js
router.put("/:id", verifyTokenAndAdmin, async (req, res) => {
try {
const updatedProduct = await Products.findByIdAndUpdate(req.params.id, {
$set: req.body
}, { new: true }
);
res.status(200).json(updatedProduct);
} catch (err) {
res.status(500).json(err);
}
});
//delete
router.delete("/:id", verifyTokenAndAdmin, async (req, res) => {
try {
await Products.findByIdAndDelete(req.params.id);
res.status(200).json("Products has been deleted.")
} catch (err) {
res.status(500).json(err);
}
})
//get product
router.get("/find/:id", verifyTokenAndAdmin, async (req, res) => {
try {
const product = await Products.findById(req.params.id);
res.status(200).json(product);
} catch (err) {
res.status(500).json(err);
}
})
verifyToken.js
const jwt = require("jsonwebtoken");
const verifyToken = (req, res, next) => {
const authHeader = req.headers.token;
if (authHeader) {
const token = authHeader.split(" ")[1];
jwt.verify(token, process.env.JWT_SEC, (err, user) => {
if (err)
res.status(401).json("Token is not valid!")
req.user = user;
next();
})
}
else {
return res.status(401).json("You are not authentication!" );
}
}
module.exports = { verifyToken, verifyTokenAndAuth, verifyTokenAndAdmin };

The reason is you are using publicRequest axios function which does not include bearer token header. Use userRequest function.
Try using the code below in your axios request from frontend:
const res = await userRequest.get("/products/find/${id}");
Instead of double quotes use string literal. Stack overflow is using my string literal as code snippet that's why I wrote in double quotes.
Also remove the extra slash after api from BASE_URL like this:
const BASE_URL = "http://localhost:8000/api"
Also check in your verifyToken.js file if you have written the functions verifyTokenAndAuth and verifyTokenAndAdmin which you are exporting. If not then please write those functions in verifyToken.js file and then export because you are using verifyTokenAndAdmin middleware in your api. Also please check that server is running and not crashing before making a request.

Register route 404 not found

I am building a register page and when I submit the I am getting a 404 not found. I am using react and express and I think the front end is good. I am missing some back end or have the wrong url for my post request: axios.post('http://localhost:3000/auth'. Would appreciate some advice if anyone can see what I have wrong.
const handleSubmit = event => {
event.preventDefault();
const user = {
username: username,
password: password,
}
axios.post('http://localhost:5000/', { user })
.then(res=>{
console.log(res);
console.log(res.data);
})
}
This is the registerPost function for my route.
export const registerPost = async (req, res) => {
const {username, password} = req.body;
const newUser = new User({username, password});
try {
await newUser.save();
console.log(newUser);
res.status(201).json(newUser);
} catch (error) {
res.status(409).json({ message: error.message });
}
}
These are the routes.
import express from 'express';
import { getPosts } from '../controllers/posts.js'
import { createPost, updatePost, deletePost, registerPost } from '../controllers/posts.js'
const router = express.Router();
router.get('/', getPosts);
router.post('/', createPost);
router.patch('/:id', updatePost);
router.delete('/:id', deletePost);
router.post('/auth', registerPost);
export default router;

You're getting a 404 error, which means the url you're trying to reach does not exist. In the React app, you're sending the request at http://localhost:5000/, but in the Express app, you've defined the register route as /auth.
Updating the url in the React app to http://localhost:5000/auth should fix this.

As far as I can see you're passing the following Object from the Frontend:
{ user: { username, password } }
but in the backend you're not looking for the user property, but directly for the username and password.
const {username, password} = req.body
// =>
const { user } = req.body

Pass data from Node server to React from 3rd party API

I am trying to make a request to 3rd party API, and then show it to the user on the website. I am using Gatsby and Node.js. But I have some problem passing data from server to client.
This code is responsible for making a request to the server :
import React from "react"
import axios from "axios"
const Test = () => {
const getDataFromServer = async () => {
try {
const resp = await axios.get("http://localhost:8080/data")
console.log("From frontend:" + resp.data)
} catch (err) {
console.log(err)
}
}
return (
<div>
<button onClick={getDataFromServer}>Get Data</button>
</div>
)
}
export default Test
And here code responsible to make request to 3rd party API from Node:
require("dotenv").config()
const morgan = require("morgan")
const axios = require("axios")
const express = require("express")
const cors = require("cors")
const dataRoutes = require("./routes/dataRoute")
const app = express()
app.use(cors())
app.use("/api", dataRoutes)
app.use(morgan("dev"))
const api = `${process.env.GATSBY_API_URL}?key=${process.env.GATSBY_API_KEY}&scope=jobPost&fields=name,ingress,startDate,endDate,logo`
const axiosInstance = axios.create({
baseURL: api,
})
app.get("/data", async (req, res, next) => {
try {
const response = await axiosInstance.get("/<path>")
return response.data
} catch (error) {
console.log(error)
}
})
app.listen(8080, () => {
console.log("server is listening on port 8080")
})
I retrieve data from API but when I want to pass it to a client then nothing happening.
Thank you in advance! :)