Search code examples
node.jsapivue.jsexpresssdk

Node JS post API endpoint not recognized in front end

I'm trying to make a post request using appwrite SDK in Node JS express and Vue JS. The SDK requires me to create an api post request to create new storage bucket in appwrite. The DOCs for this particular request isn't explaining really how to create the api in node JS express. I'm really new to Node JS and I already succeeded at creating get request but whenever I create the post request I get 404 not found error.

Node JS express file (server.js): In this file there is get users request API which works perfectly fine. And there is create bucket post request which when being called in frontend it comes back with a 404

const express = require("express");
const path = require("path");
const app = express(),
  bodyParser = require("body-parser");
port = 3080;

// Init SDK
const sdk = require("node-appwrite");
let client = new sdk.Client();
let users = new sdk.Users(client);
let storage = new sdk.Storage(client);

client
  .setEndpoint("http://localhost/v1") // Your API Endpoint
  .setProject("tailwinder") // Your project ID
  .setKey(
    "Secrer Key!"
  ); // Your secret API key

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(express.static(path.join(__dirname, "../appwrite-app/build")));


//This get request works fine
//get user by ID
app.get("/v1/users/:id", (req, res) => {
  let promise = users.get(req.params.id);

  promise.then(
    function (response) {
      res.json(response);
    },
    function (error) {
      console.log(error);
    }
  );
});

//This one isn't recognised in frontend
app.post("/v1/storage/buckets", function (req, res) {
  let promise = storage.createBucket("bucket_id", "bucket_name", "file");

  promise.then(
    function (response) {
      res.json(response);
    },
    function (error) {
      console.log(error);
    }
  );
});

app.listen(port, () => {
  console.log(`Server listening on the port::${port}`);
});

bucketsServices.js: Here I'm using fetch post request to the api endpoint but it's not working.

export async function createBucket() {
  const response = await fetch("/v1/storage/buckets", {
    method: "POST",
  });
  return await response.json();
}

Addcomponent.vue: Here I'm calling out the createBucket function from vue js file

    bucketTesting() {
      createBucket().then((response) => {
        console.log(response);
      });
    },

The error which I assume it means that it's not reading my node js express post API:

bucketsService.js?993b:2          POST http://localhost:8080/v1/storage/buckets 404 (Not Found)

Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0

A screenshot of the same error:

Screenshot of the error

Something is missing here and I can't really figure it out.

Solution

  • You are making request to localhost:8080 meanwhile your server is running at localhost:3080

    I believe your vue is running at port 8080 that's why /v1/storage/buckets gets prefixed by localhost:8080

    Try to provide full URL while making request

    export async function createBucket() {
  const response = await fetch("localhost:3080/v1/storage/buckets", {
    method: "POST",
  });
  return await response.json();
}

    Better way might be to add proxy to automatically redirect request to correct URL, but this should work for now. This article might help with how to setup proxy in vue