Fetch Pending все время. Запрос уходит на сервер, но ответ просто не приходит
Такая проблема только с отправкой файла (jpeg) через FormData. Функция для отправки запроса:
export const HttpPostFile = async (path, body, headers = {}) => {
const options = {
method: "POST",
headers: headers,
body: body,
credentials: "include"
}
console.log(options)
let res = await fetch(serverUrl + path, options).then(r => console.log(r)).catch(e => console.log(e))
console.log(1)
return await res.json()
}
Сам вызов функции внутри хука, сама функция updatePhoto
вызывается по клику на элемент:
const [updatePhoto, loading, error] = useFetch(async () => {
let data = new FormData();
let file = await fetch(newPhoto).then(r => r.blob()).then(blobFile => new File([blobFile], `user_${id}.jpeg`, { type: "image/jpeg" }))
data.append(`users_photo`, file, `user_${id}.jpeg`)
let res = await HttpPostFile(`/users/${id}/update_photo`, data, {"Authorization": `Bearer ${localStorage.getItem("access_token")}`})
console.log(res);
setPhoto(newPhoto);
setPhotoChanged(false);
setNewPhoto(undefined);
});
На сервер все приходит и обрабатывается как нужно (использую multer, но и до его использования ответа не было):
app.use(cors({
credentials: true,
origin: ["http://localhost:3000"]
}))
app.use(express.json())
app.use(express.urlencoded({ extended: false }));
app.use("/users", userRouter);
app.use("/auth", authRouter);
app.use("/secure", secureRouter);
app.listen(process.env.PORT, async () => {
console.log('\x1b[36m%s\x1b[0m', "[server]: server is working at http://localhost:5000")
})
Ендпоинт для загрузки фото:
async updateUsersPhoto(req: Request, res: Response) {
console.log('\x1b[36m%s\x1b[0m', `[server]: POST request to /users/${req.params.id}/update_photo`)
try {
const decoded = await authController.verifyJWT((req.headers.authorization as string).slice(7)) as IJwtPayload
res.status(200)
}
catch (e) {
console.log(`Error was occurred: ${e}`)
res.status(401)
}
}
userRouter.post("/:id/update_photo",
userController.updateUsersPhoto,
FileMiddleware.diskLoader.single("users_photo")
)
Ответы (1 шт):
Автор решения: Mihalych
→ Ссылка
Как правильно заметил andreymal, небходимо отправить ответ, а не просто назначить статус)
res.status(200).json(что-то там)