[Fixed] REST API call works from terminal with curl but I get 404 in browser from my Vue / axios app

Issue

If do curl like this:

curl --request POST \
  --url http://localhost:3600/users \
  --header 'content-type: application/json' \
  --header 'user-agent: vscode-restclient' \
  --data '{"email": "[email protected]","password": "sup3rS3cr3tPassw0rd!23"}'

This returns as expected:

{"id":"6077f1853bd1e07f173980ef"}

But in my Vue code:

      const axios = require("axios");
      console.log("Here goes nothing!");

      let res = axios
        .post(
          "/http://localhost:3600/users", //
          {
            email: "[email protected]",
            password: "sup3rS3cr3tPassw0rd!23",
          }
        )
        .catch(function (error) {
          console.log(JSON.stringify(error));
        });

in browsers it shows in console returns:

{"message":"Request failed with status code 404","name":"Error","stack":"createError\nsettle\nhandleLoad","config":{"url":"/http://localhost:3600/users","method":"post","data":"{\"email\":\"[email protected]\",\"password\":\"sup3rS3cr3tPassw0rd!23\"}","headers":{"Accept":"application/json, text/plain, */*","Content-Type":"application/json;charset=utf-8"},"transformRequest":[null],"transformResponse":[null],"timeout":0,"xsrfCookieName":"XSRF-TOKEN","xsrfHeaderName":"X-XSRF-TOKEN","maxContentLength":-1,"maxBodyLength":-1}}

To me it looks like the axios request was correct but something else went wrong.

I suspected CORS problem and tried to disable it in Safari (I’m on macOS) with Develop/Disable Cross-Origin Restrictions and Develop Disable Local File Restrictions.

I get the same error in Chrome where I have also tried to disable CORSs.

Before disabling I got some CORS exceptions but now I get 404.

My REST API is from this blog / demo:

[https://www.toptal.com/express-js/nodejs-typescript-rest-api-pt-2]

and this code repo:

[https://github.com/makinhs/toptal-rest-series]

Solution

remove / from first in this line

"/http://localhost:3600/users"