I am getting 404 not found in my fetch post request

Question

I am sending post request using fetch.I am sending with jsonbody.It is working with postman but not in my reactcode.please help

I have set reqeust body in header.I dont know why i am getting 404 not found exception.

here is my code

      authenticate=(loginid,passw)=>
          {
            console.log(loginid,passw);
            const url ="http://localhost:8443/v2/rest/authenticateuser"; 
            var requestBody={"loginid":loginid,"passw":passw};
            console.log(requestBody);
            fetch("http://localhost:8443/v2/rest/authenticateuser",
              {
                method: 'POST',
                  mode: 'no-cors', // no-cors, cors, *same-origin
                cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
                credentials: 'same-origin',
                headers: {
                  'Accept': 'application/json',
                  'Content-Type': 'application/json',

                  },
                  redirect: 'follow', // manual, *follow, error
                referrer: 'no-referrer', // no-referrer, *client
                body:JSON.stringify(requestBody)
              })
            .then(res => res.json())
            .then(
              (result) => {
                 console.log(result);
                 this.props.login(result.islogin); 
              })
              .catch((error) => {
                this.setState({show:false});
                window.alert("error",error);
               console.log("authentication failed");
              });
          }
//handlesubmit as a handler for submit button
      handleSubmit = e => {
        e.preventDefault();
        this.props.manageridupdate(e.target.elements.loginid.value);
        this.authenticate(e.target.elements.loginid.value,e.target.elements.passw.value);

      };

I am getting this error.

   POST http://localhost:8443/v2/rest/authenticateuser 404 (Not Found)
    App.authenticate @ App.js:19
    App.handleSubmit @ App.js:49
    callCallback @ react-dom.development.js:147
    invokeGuardedCallbackDev @ react-dom.development.js:196
    invokeGuardedCallback @ react-dom.development.js:250
    invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:265
    executeDispatch @ react-dom.development.js:571
    executeDispatchesInOrder @ react-dom.development.js:596
    executeDispatchesAndRelease @ react-dom.development.js:695
    executeDispatchesAndReleaseTopLevel @ react-dom.development.js:704
    forEachAccumulated @ react-dom.development.js:676
    runEventsInBatch @ react-dom.development.js:844
    runExtractedEventsInBatch @ react-dom.development.js:852
    handleTopLevel @ react-dom.development.js:5029
    batchedUpdates$1 @ react-dom.development.js:21463
    batchedUpdates @ react-dom.development.js:2247
    dispatchEvent @ react-dom.development.js:5109
    (anonymous) @ react-dom.development.js:21520
    unstable_runWithPriority @ scheduler.development.js:255
    interactiveUpdates$1 @ react-dom.development.js:21519
    interactiveUpdates @ react-dom.development.js:2268
    dispatchInteractiveEvent @ react-dom.development.js:5085

You get a `Bad Request 400` or `Not Found 404`? In the title it is 400, in the body it's 404. — Youssef BH, Jul 06 '19 at 18:03
Are 100% sure you have this endpoint `http://localhost:8443/v2/rest/authenticateuser` in your backend, **and** it takes a **POST** request not anything else — Youssef BH, Jul 06 '19 at 21:17

score 0 · Answer 1 · answered Jul 06 '19 at 19:27

0

Can you share the handleSubmit() function as well?

I had the same issue as well when learning react, so what I did in my case was add http://localhost:<port> as a proxy variable in my package.json.

{...}

proxy: "http://localhost:3000",

{...}

Just like you I tried adding no-cors but it didn't work in my case. So I had to do the above step. I am beginner as well so I might not be right but my guess is, fetch api doesn't like localhost in url.

answered Jul 06 '19 at 19:27

Mihir Srivastava

49
5

I have added proxy in paclage.json but its not resolved.when i changed mode to cors i am getting this error. OPTIONS http://localhost:8443/v2/rest/auth 404 (Not Found) Access to fetch at 'http://localhost:8443/v2/rest/authenticateuser' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.why changing to options? – ammy Jul 06 '19 at 20:20
Keep the mode to no-cors only. Instead of `3000` try your port `8443`. `3000` was a port that I used in my example. You need to use your own port. It will be - `localhost:8443` – Mihir Srivastava Jul 07 '19 at 21:20
actually what the problem is ..when i set content-type to "application/json" ,request is changing to OPTIONS.so I am getting not found exception. – ammy Jul 08 '19 at 04:06
Maybe have a look at [this](https://stackoverflow.com/questions/8153832/xmlhttprequest-changes-post-to-option) if it helps? – Mihir Srivastava Jul 08 '19 at 17:10

I am getting 404 not found in my fetch post request

1 Answers1