前端无法识别 Node JS post API 端点

Question

我正在尝试在 Node JS express 和 Vue JS 中使用 appwrite SDK 发出 post 请求。 SDK 要求我创建一个 api post 请求以在 appwrite 中创建新的存储桶。这个特定请求的 DOCs 并没有真正解释如何在节点 JS Express 中创建 api。我是 Node JS 的新手，我已经成功创建了 get 请求，但是每当我创建 post 请求时，我都会收到 404 not found 错误。

Node JS 表达文件（server.js）：在这个文件中有 get users request API ，它工作得很好。并且有创建存储桶 post 请求，当在前端被调用时，它会返回 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: 在这里，我使用 fetch post 请求到 api 端点，但它不工作。

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

Addcomponent.vue: 这里我从 vue js 文件中调用 createBucket 函数

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

我假设的错误意味着它没有读取我的节点 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

同样错误的截图：

这里缺少一些东西，我真的想不通。

Answer 1

您正在向 localhost:8080 发出请求，同时您的服务器运行位于 localhost:3080

我相信你的 vue 在 8080 端口是运行，这就是为什么 /v1/storage/buckets 的前缀是 localhost:8080

在提出请求时尽量提供完整的URL

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

更好的方法可能是添加代理以自动重定向请求以更正 URL，但这目前应该可行。 This article might help with how to setup proxy in vue

前端无法识别 Node JS post API 端点

Node JS post API endpoint not recognized in front end

node.js

api

vue.js

express

sdk