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
  }
})

经过测试,成功。

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

相关文章
|
存储 缓存 算法
【C/C++ 性能优化】提高C++程序的缓存命中率以优化性能
【C/C++ 性能优化】提高C++程序的缓存命中率以优化性能
2428 0
|
8月前
|
Linux API iOS开发
零基础极速搞定OpenClaw(小龙虾):Windows/macOS/Linux/阿里云全部署+百炼API配置全攻略
很多人第一次听说OpenClaw(也叫Clawdbot,被很多用户称为“小龙虾”),都是被它能自动整理、自动提问、自动总结、自动执行任务的能力吸引。不管是用来做个人日记、知识管理、学习辅助,还是用来做信息搜集、政策解读、工作自动化,OpenClaw都能把零散信息变成结构化、可复用、可追踪的真实生产力。但绝大多数零基础小白刚上手时,都会卡在三件事上:环境装不上、网络不通、模型配不好,结果折腾几天都跑不起来。
1731 0
|
7月前
|
存储 缓存 监控
企业接入 GPT-5.5 前要评估什么:架构、合规、成本与容灾
GPT-5.5已超越聊天接口,具备长上下文、工具调用、推理工作流等企业级能力,但随之带来权限、成本、合规新挑战。接入前须厘清架构解耦、权限审计、数据合规、分层计费与容灾备用五大核心问题。
464 0
|
12月前
|
开发框架 .NET Linux
阿里云企业邮箱与虚拟主机收费标准、活动价格及购买流程参考
购买阿里云企业邮箱和云虚拟主机需要多少钱?企业邮箱目前活动价540.00元/1年起,云虚拟主机独享基础增强版月付49元/1个月起,年付588元/1年起。本文将详细介绍阿里云企业邮箱和云虚拟主机的最新收费标准、活动价格以及具体的购买流程,以供参考。
1382 2
|
搜索推荐 数据挖掘 API
【干货满满】阿里妈妈API接口和淘宝联盟的接口有哪些区别
阿里妈妈API覆盖全链路营销,包含广告投放、数据分析及淘宝客推广,适用于品牌商家与营销工具;淘宝联盟API则专注淘宝客业务,提供商品查询、链接生成与佣金结算等功能,适合推广者使用。两者在功能、权限及应用场景上各有侧重。
|
JavaScript 前端开发 数据安全/隐私保护
Web开发者必看:手把手教你如何轻松播放m3u8流地址,解锁视频播放新技能,让你的项目更上一层楼!
【10月更文挑战第23天】随着互联网技术的发展,m3u8格式因良好的兼容性和高压缩率被广泛用于网络流媒体传输。本文介绍如何在Web端播放m3u8流地址,包括引入视频播放器(如Video.js)、创建播放器容器、初始化播放器及播放m3u8流的具体步骤。此外,还涉及处理加密m3u8流的示例。
5046 1
|
jenkins 测试技术 持续交付
Jenkins 在多分支项目中的应用
【8月更文第31天】在现代软件开发实践中,分支管理是一项至关重要的策略,它允许开发团队在不同的功能开发、修复bug或进行实验时不会干扰主干代码。随着项目的复杂度增加,维护多个分支并确保它们的质量变得越来越具有挑战性。Jenkins 作为一款流行的持续集成(CI)和持续部署(CD)工具,提供了强大的功能来支持多分支项目的自动化测试和部署。本文将探讨 Jenkins 如何帮助管理多分支项目,并提供具体的代码示例。
639 1
|
前端开发 JavaScript
vite中css最佳实践:使用postcss完善项目中的css配置
【8月更文挑战第3天】使用postcss完善项目中的css配置
4307 1
|
前端开发 对象存储 数据安全/隐私保护
阿里云前端直传has been blocked by CORS policy: Response to preflight request doesn‘t pass access control
阿里云前端直传has been blocked by CORS policy: Response to preflight request doesn‘t pass access control
2377 2
|
编解码 前端开发 JavaScript
纯前端也能实现视频转GIF
纯前端也能实现视频转GIF