Uncaught in promise ошибка 404

I need to send data to backend, but I am having this error:

Uncaught (in promise) Error: Request failed with status code 404

How can I solve this??

Image below:

Code javascript below:

handleClick(_success, _error) {
    const usuarioLogin = this.props.cliente;
    const usuarioCliente = parseInt(this.state.usuario);

    const ObjetoChamado = {
      titulo: this.state.titulo,
      descricao: this.state.descricao,
      area: parseInt(this.state.area),
      categoria: parseInt(this.state.categoria),
      servico: parseInt(this.state.servico),
      usuario: usuarioLogin,
      cliente: usuarioCliente,
    };

    this.props.abrirChamado(
      ObjetoChamado,
      (response) => {
        this.props.getChamados(usuarioLogin, null, (chamados) => {
          // Chamado aberto, atualizar lista e fechar o popup de abertura
          this.props.setClientData(usuarioLogin, null, chamados.data.objeto);
          this.props.visible(false);
        });
      },
      (error) => {
        alert(!!error ? error : 'Não foi possível abrir o chamado.');
      }
    );

    axios.post(ObjetoChamado).then((response) => {
      const data = response.data;

      //   if (Object.keys(data).length > 0) {
      //     if (typeof _success === 'function') _success(data);
      //   } else {
      //     if (typeof _error === 'function') {
      //       _error({
      //         code: 404,
      //         message: 'Não há nenhum registro para este cliente.',
      //       });
      //     }
      //   }
      console.log('DATA:', data);
    });
  };

If your are using laravel for API and vue/Nuxtjs for frontend and axios for send data to API….
This type of errors can be faced for laravel validation error sending not in correct way using try{} catch(){} block or receiving errors by axios not in correct way to using try() catch(){} block.
Here, try catch block using for error handling.

If your API routes called the public function its name «register()», so your function inside your controller have to like following…(I am using laravel-8 for API)

public function register(Request $request) {
    try {
        $fields = $request->validate([
            'name' => 'required|string',
            'email' => 'required|string|email|unique:users',
            'password' => 'required|string|confirmed',
        ]);

        $user = User::create([
            'name' => $fields['name'],
            'email' => $fields['email'],
            'password' => bcrypt($fields['password'])
        ]);
        
        $token = $user->createToken('myapptoken')->plainTextToken;
        $response = [
            'user' => $user,
            'token' => $token,
        ];
        
        return response()->json($response, 200);
    } catch(ValidationException $e) {            
        return response()->json([
            'status' => 'error',
            'msg' => 'error',
            'errors' => $e->errors()
        ], 422);
    }
}

and Frontend Nuxt or vue methods name is «registerNewUser()» so, codes can be following for error handling…

async registerNewUser() {
    try {
      let data = {
        name             : this.name.trim(),
        email            : this.email.trim(),
        password         : this.password.trim(),
        password_confirmation : this.password_confirmation.trim(),
      };
      let headers = {
        headers: {
            'Accept': 'application/json',
        }
      };
      await this.$axios
      .post("/api/register", data, headers)
      .then((response) => {
        console.log("response", response);
        if(response) {
          // console.log(response)
        } else {

        }
      });
    } catch(err) {
      // here we are receiving validation errors
      console.log("Err == ", err.response);
      console.log(err.response.data.errors);
    }
}

You are receiving response inside axios then block or receive error inside catch block using err.response

Here,

let data = {
   name             : this.name.trim(),
   email            : this.email.trim(),
   password         : this.password.trim(),
   password_confirmation : this.password_confirmation.trim(),
};

Given codes is for data of Nuxtjs or vuejs. If not know that you can using like following data or any other data…

let data = {
   name             : 'Kallol',
   email            : 'kallolray94@gmail.com',
   password         : '123456',
   password_confirmation : '123456',
};

Description

I find sometimes when pressing the back button, then from there clicking on another link, nothing happens. I see this in the console: app-fe7c17e2944200c5b471.34096c386004d3b05de6e33102e6278b.js:1 Uncaught (in promise) Error: 404 page could not be found. Checkout https://www.gatsbyjs.org/docs/add-404-page/ at app-fe7c17e2944200c5b471.34096c386004d3b05de6e33102e6278b.js:1.

Steps to reproduce

1. go to https://www.fgbg.art
2. click on a link, then a thumbnail to arrive at a detail page
3. press back button to return to list page
4. click on another thumbnail

Expected result

goes to other detail page

Actual result

error in console as noted above.

Environment

System:
OS: Linux 4.15 Ubuntu 18.04.3 LTS (Bionic Beaver)
CPU: (8) x64 Intel(R) Core(TM) i7-7700K CPU @ 4.20GHz
Shell: 4.4.20 — /bin/bash
Binaries:
Node: 10.16.0 — ~/.nvm/versions/node/v10.16.0/bin/node
Yarn: 1.12.3 — ~/.yarn/bin/yarn
npm: 6.9.0 — ~/.nvm/versions/node/v10.16.0/bin/npm
Languages:
Python: 2.7.15+ — /usr/bin/python
Browsers:
Chrome: 76.0.3809.100
Firefox: 68.0.1
npmPackages:
gatsby: ^2.13.20 => 2.13.20
gatsby-plugin-favicon: ^3.1.6 => 3.1.6
gatsby-plugin-google-analytics: ^2.1.4 => 2.1.4
gatsby-plugin-manifest: ^2.2.3 => 2.2.3
gatsby-plugin-offline: ^2.2.4 => 2.2.4
gatsby-plugin-react-helmet: ^3.1.2 => 3.1.2
gatsby-plugin-sharp: ^2.2.7 => 2.2.7
gatsby-plugin-typescript: ^2.1.2 => 2.1.2
gatsby-source-filesystem: ^2.1.5 => 2.1.5
gatsby-source-google-sheets: ^1.1.1 => 1.1.1
gatsby-transformer-csv: ^2.1.2 => 2.1.2
gatsby-transformer-sharp: ^2.2.3 => 2.2.3

More context

I think this only happens if I have the site loaded in my browser, and I deploy a new version.

The site is hosted on gh-pages, and thus I had the other problem of stale page-data.json files being used, so I employed the hack of adding a sha to basically all non-html files as described here. Here is the terrible code I wrote to do this.

If I refresh the page, everything works again as expected.

I suspect if I took the above sha hack out, this problem would go away. But then I’d be back to the stale page-data.json problem. I’m far from a gatsby expert, but it feels like being stuck between a rock and a hard place when using gh-pages. Maybe gatsby really is intended to be used in situations when you have control over the headers the server sets on responses?

I’m trying to send data to my backend using axios but whenever I click the button I get these errors in the console: `xhr.js:178 POST http://localhost:8081/api/favourite/addToFavourite 404 (Not Found)` and

createError.js:16 Uncaught (in promise) Error: Request failed with status code 404

at createError (createError.js:16:1)

at settle (settle.js:17:1)

at XMLHttpRequest.handleLoad (xhr.js:61:1)

I’ve gone through the code and I don’t see any error with how my urls are written and they all seem to match up so I don’t understand why url is returning as invalid.

Edit: here’s a link to the stackoverflow question incase the formatting here is a bit difficult to read https://stackoverflow.com/questions/71563608/uncaught-in-promise-error-request-failed-with-status-code-404-why-is-it-inva

Here’s my server.js file

    const express = require("express");
    const cors = require("cors");
    const dbConfig = require("./app/config/db.config");
    
    const app = express();
    
    var corsOptions = {
      origin: "http://localhost:8081"
    };
    
    app.use(cors(corsOptions));
    
    // parse requests of content-type - application/json
    app.use(express.json());
    
    // parse requests of content-type - application/x-www-form-urlencoded
    app.use(express.urlencoded({ extended: true }));
    
    const db = require("./app/models");
    const Role = db.role;
    
    db.mongoose
      .connect(`mongodb+srv://tami00:MEUxClWqUNbLz359@cluster0.gmvao.mongodb.net/test?retryWrites=true&w=majority`, {
        useNewUrlParser: true,
        useUnifiedTopology: true
      })
      .then(() => {
        console.log("Successfully connect to MongoDB.");
        initial();
      })
      .catch(err => {
        console.error("Connection error", err);
        process.exit();
      });
    
    // simple route
    app.use('/api/favourite', require('./app/routes/favourite.routes'));
    // routes
    // require(".app/routes/favourite.routes")(app);
    require("./app/routes/auth.routes")(app);
    require("./app/routes/user.routes")(app);
    
    // set port, listen for requests
    const PORT = process.env.PORT || 8080;
    app.listen(PORT, () => {
      console.log(`Server is running on port ${PORT}.`);
    });
    
    function initial() {
      Role.estimatedDocumentCount((err, count) => {
        if (!err && count === 0) {
          new Role({
            name: "user"
          }).save(err => {
            if (err) {
              console.log("error", err);
            }
    
            console.log("added 'user' to roles collection");
          });
    
          new Role({
            name: "creator"
          }).save(err => {
            if (err) {
              console.log("error", err);
            }
    
            console.log("added 'creator' to roles collection");
          });
    
          new Role({
            name: "watcher"
          }).save(err => {
            if (err) {
              console.log("error", err);
            }
    
            console.log("added 'watcher' to roles collection");
          });
        }
      });
    }

This is the component file for favourites

    import Axios from 'axios';
    import React, { useEffect, useState } from 'react'
    import styled from "styled-components";
    
    const FavouriteButton = styled.button`
      height: 30px;
      width: 40px;
    `;
    
    function FavouriteComp(props) {
    
        const [favouriteNumber, setFavouriteNumber] = useState(0);
        const [favourited, setFavourited] =  useState(false);
    
        const variable = {
            userFrom: props.userFrom,
            movieId: props.movieInfo?.id,
            movieTitle: props.movieInfo?.title,
            movieImg: props.movieInfo?.poster_path
        }
        
        useEffect(() => {
    
            Axios.post('/api/favourite/favouriteNumber', variable)
            .then(response => {
                if(response.data.success){
                    setFavouriteNumber(response.data.favouriteNumber)
                }else {
                    alert('Failed to get number');
                }
            })
    
            Axios.post('/api/favourite/favourited', variable) 
                .then(response =>{
                    if(response.data.success){
                        setFavourited(response.data.favourited)
                    }else {
                        alert('Failed to get info');
                    }
                })
    
        }, [])
    
        const onClickFavourite = () => {
            if(favourited) {
                Axios.post('/api/favourite/removeFavorite', variable)
                    .then(response =>{
                        if(response.data.success){
                            setFavouriteNumber(favouriteNumber - 1)
                            setFavourited(!favourited)
                        }else {
                            alert('Failed to remove');
                        }
                    })
    
            }else {
                Axios.post('/api/favourite/addToFavourite', variable)
                    .then(response =>{
                        if(response.data.success){
                            setFavouriteNumber(favouriteNumber + 1)
                            setFavourited(!favourited)
                        }else {
                            alert('Failed to add');
                        }
                    })
            }
        }
    
    
        return (
            <div>
                <FavouriteButton onClick={onClickFavourite}>{favourited? "removed" : "add"}{favouriteNumber}</FavouriteButton>
            </div>
        )
    }
    
    export default FavouriteComp

Here is my backend routes for favourite

    const express =  require('express');
    const router = express.Router();
    const { authJwt } = require("../middlewares");
    
    router.post("/favouriteNumber", [authJwt.verifyToken], (req, res) => {
        Favourite.find({"movieId": req.body.movieId})
            .exec((err, favourite) => {
                if(err) return res.status(400).send(err)
                res.status(200).json({success: true, favouriteNumber: favourite.length})
            })
    })
    
    router.post("/favourited", [authJwt.verifyToken], (req, res) => {
        Favourite.find({"movieId": req.body.movieId, "userFrom": req.body.userFrom})
            .exec((err, favourite) => {
                if(err) return res.status(400).send(err) 
    
                let result = false;
                if(favourite.length !== 0) {
                    result = true
                }
    
                res.status(200).json({success: true, favourited: result});
    
    
            })
    })
    
    router.post("/addToFavourite", [authJwt.verifyToken], (req, res) => {
        
        const favourite = new Favourite(req.body)
    
        favourite.save((err, doc) => {
            if(err) return res.json({success: false, err})
            return res.status(200).json({success: true, doc})
        })
    })
    
    router.post("/removeFavorite", [authJwt.verifyToken], (req, res) => {
        
        Favourite.findOneAndDelete({movieId: req.body.movieId, userFrom: req.body.userFrom})
            .exec((err, doc) => {
                if(err) return res.json({success: false, err})
                return res.status(200).json({success: true, doc})
            })
    })
    
    module.exports = router;

Dear ladies and gentlemen,

I receive following error after deployment of the SPFx solution to SharePoint 2019 App catalog:

«Uncaught (in promise) Error: Error making HttpClient request in queryable [404] Not Found»

When I run the solution through «gulp serve» everything works well. No errors occur.

In methods which use the «sp» object from «pnp» the error occured.

Here is one example:

import {sp} from ‘@pnp/sp’;

public GetListExistsAndContainsItems(listTitle: string): Promise<boolean> {

return new Promise<boolean>(async(resolve, reject) => {

if (listTitle) {

console.log(«GetListExistsAndContainsItems — listTitle: » + listTitle);

let listExists: boolean = false;

await sp.web.lists.getByTitle(listTitle).items.select(«Id»).getAll().then((allItems: any[]) => {

if (allItems) {

listExists = true;

console.log(«GetListExistsAndContainsItems — listExists: » + listExists);

resolve(listExists);
}
}).catch((error: any) => {

console.log(«GetListExistsAndContainsItems — error: » + error);

reject(error);
})
}
})
}

Classic rest api calls through the WebPartContext work well also after deployment of the solution into the app catalog.

Only calls through «sp» from «pnp» throw this error only after deployment to app catalog in SharePoint 2019.

Thank you for your help.

Ladislav Stupak