nuxt3:接口转发,实现跨域

简介: nuxt3:接口转发,实现跨域

一、背景

当接口请求的域名和项目适用的域名不一致时候,可以适用接口转发的方法实现跨域

原理:服务的请求接口是不跨域的,nuxt3服务端请求接口后转发给localhost:3000。

本地开发,生产环境均可以使用。

二、理解服务器中间件

Nuxt 将自动读取~/server/middleware 中的任何文件,以便为您的项目创建服务器中间件。这些文件将在每个请求上运行,这与映射到其自己路由的API routes不同。这通常是为了让您能够向所有响应添加公共标头、记录响应或修改传入请求对象以供以后在请求链中使用。

本文我们使用服务器中间件返回接口响应,实现跨域。

服务器目录(server) | Nuxt 3 - 中文文档

三、代码

server/middleware/marking-center.ts

const { public: { baseURL } } = useRuntimeConfig()
export default defineEventHandler(async (event) => {
  if (event.node.req.url?.includes('/marking-center')) {
    const {method, url} = event.node.req
    const options: any  = {
      responseType: 'json',
    }
    options.headers = {
      'content-type': 'application/json',
      accept: 'application/json'
    }
    options.method = method
    if (method !== 'get' && method !== 'GET') {
      options.body = JSON.stringify(await readBody(event))
    }
    const resBody = await $fetch(baseURL + url, options)
    .then(res => res)
    .catch(err => {
      return {
        code: '1',
        msg: '服务端错误',
        payload: null
      }
    })
    return resBody
  }
})

经过测试,成功。

四、欢迎交流指正,关注我,一起学习。

相关文章
Nuxt.js run build 之后生成的 dist 文件夹在哪
Nuxt.js run build 之后生成的 dist 文件夹在哪
745 0
|
3月前
|
人工智能 自然语言处理 安全
阿里云一键部署OpenClaw教程+OpenClaw(Clawdbot)接入邮箱完整指南
在AI自动化办公需求持续升级的当下,OpenClaw(前身为Clawdbot、Moltbot)作为一款开源AI代理与自动化平台,凭借自然语言指令执行、多场景任务适配、主流大语言模型兼容等核心优势,成为个人与轻量团队打造专属智能助手的首选工具。它区别于普通聊天机器人,堪称“能替人干活的AI数字员工”,可轻松完成读写文件、日程管理、代码生成、跨工具协同等实操任务,更能通过接入邮箱实现邮件自动接收、指令解析、自动回复等自动化操作,彻底摆脱重复手工劳动。
3449 1
|
存储 应用服务中间件 nginx
nuxt3:我们开始吧-开发-配置-部署(三)
nuxt3:我们开始吧-开发-配置-部署(三)
2403 0
Nuxt中服务端请求无法获取LocalStorage和Cookie的解决办法!
Nuxt中服务端请求无法获取LocalStorage和Cookie的解决办法!
|
机器学习/深度学习 传感器 大数据
大数据如何化解城市交通拥堵的难题?
大数据如何化解城市交通拥堵的难题?
433 5
|
缓存 数据中心 网络架构
5个减少网络延迟的简单方法
高速互联网对工作与娱乐至关重要,延迟和断线会严重影响效率和体验。本文探讨了导致连接缓慢的三个关键因素:吞吐量、带宽和延迟,并提供了减少延迟的实用方法。包括重启设备、关闭占用带宽的程序、使用有线连接、优化数据中心位置以及添加内容分发网络 (CDN) 等策略。虽然完全消除延迟不可能,但通过这些方法可显著改善网络性能。
4350 7
|
前端开发 JavaScript
vite中css最佳实践:使用postcss完善项目中的css配置
【8月更文挑战第3天】使用postcss完善项目中的css配置
4067 1
|
Web App开发 JSON 前端开发
跨域问题总结
跨域问题总结
1542 0
跨域问题总结

热门文章

最新文章