Nodejs nuxt3 后端(server)目录接口调用问题求解答

server 里面写了两个接口,调用地址分别是/yd/copyByUrl 和/yd/aaa 用 postman 都能调用成功,但是在/yd/copyByUrl 里面调用/yd/aaa 时报错:

copyByUrl 方法
[nuxt] [request error] [unhandled] [500] [GET] "/yd/aaa": <no response> Failed to parse URL from /yd/aaa
  at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
  at async $fetch2 (/E:/dev/wsProjects/xxdl-yingdao-tool/node_modules/ofetch/dist/shared/ofetch.00501375.mjs:261:15)
  at Object.handler (E:\dev\wsProjects\xxdl-yingdao-tool\server\routes\yd\copyByUrl.post.ts:30:18)
  at async Object.handler (/E:/dev/wsProjects/xxdl-yingdao-tool/node_modules/h3/dist/index.mjs:1962:19)
  at async Server.toNodeHandle (/E:/dev/wsProjects/xxdl-yingdao-tool/node_modules/h3/dist/index.mjs:2249:7)
[Vue Router warn]: No match found for location with path "/yd/copyByUrl"
[Vue Router warn]: No match found for location with path "/yd/copyByUrl"
[Vue Router warn]: No match found for location with path "/yd/copyByUrl"

调用的代码: let res = await $fetch('/yd/aaa/')

nuxt3 问题.png

目前的解决办法是 gpt 给的:

const req = event.req;
  const protocol = req.headers['x-forwarded-proto'] || 'http';
  const host = req.headers.host;
  const baseUrl = `${protocol}://${host}`;

console.log(“Base URL:”, baseUrl);

通过拼接 baseUrl 和路径来实现调用的

请问,nuxt3 在遇到这种需要互相调用的接口下,是该怎么写接口呢? 闲鱼问了三个人都没给解决...说没遇到过


Nodejs nuxt3 后端(server)目录接口调用问题求解答
11 回复

试试写成工具函数来调用


解决了,webstorm 输入$fetch 会自动导包,把他的 import 删除就好了…

问一下 如果用 useFetch 换掉这个$fetch 可以用吗

好像不行, useFetch 是用在.vue 页面中的

nuxt3 能不能直接作为 webapi 服务器?类似 express 那样

可以的,nuxt 是个前后端框架,能单独用也能一块用

也是用 express 吗?还是说框架内置了 router 和 control?

看样子是不需要 express 了,我学习一下

加油,我也是刚开始学,在做项目

在Node.js中使用Nuxt 3搭建项目时,后端(server)目录中的接口调用通常通过Nuxt 3的Server Middleware或API路由来处理。以下是如何在Nuxt 3中设置API路由并调用后端接口的简要指南。

  1. 创建API路由: 在server目录中创建一个新的文件,比如api/index.js,用于定义API路由。

    export default defineNuxtRouteModule((options) => {
      options.route('/api/data', {
        method: 'get',
        handler: async (req, res) => {
          const data = await fetchSomeData(); // 假设这是你的后端数据获取函数
          res.status(200).json(data);
        }
      });
    });
    
    async function fetchSomeData() {
      // 模拟数据获取,实际可以是数据库查询等
      return { message: 'Hello from server!' };
    }
  2. 配置Nuxt 3: 确保在nuxt.config.ts中正确配置了Server Middleware或API路由模块。

    export default defineNuxtConfig({
      server: {
        middlewareMode: 'html', // 根据需要调整
        routesDir: 'server/api' // 指定API路由目录
      }
    });
  3. 前端调用: 在Nuxt 3的组件或页面中,通过useFetchaxios等HTTP客户端调用API。

    const { data } = await useFetch('/api/data');
    console.log(data);

这样,你就能够在Nuxt 3项目中设置并调用后端API接口了。记得根据实际需求调整代码和配置。

回到顶部
AI 助手
你好,我是IT营的 AI 助手
您可以尝试点击下方的快捷入口开启体验!