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

经过测试,成功。

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

相关文章
|
应用服务中间件 nginx
Nuxt 获取当前域名
Nuxt 获取当前域名
|
前端开发 应用服务中间件 网络安全
【Nuxt】Nuxt做官网要求适配PC&Mobile,我的解决方案
前言 项目终于进入了尾声,这段时间主要在忙公司官网的开发,前段时间我在忙另外一个项目的时候,官网这个项目就启动了,团队里的另外一个小伙伴居然用Vue-cli构建了一个项目去做官网,导致我很难李姐,所以我提出重构项目,由我主导开发,写篇文章记录一下项目信息以及部分关键点。
2152 0
|
JSON JavaScript 前端开发
Vue项目使用mock数据的几种方式
Vue项目使用mock数据的几种方式
|
存储 应用服务中间件 nginx
nuxt3:我们开始吧-开发-配置-部署(三)
nuxt3:我们开始吧-开发-配置-部署(三)
1737 0
|
JavaScript 前端开发 HTML5
PDF转图片,PDF转JPG/PNG,完全由JS实现
原理 使用pdf.js预览图片,pdf.js将pdf通过canvas将每一页渲染出来,然后我们通过canvas的toDataURL方法保存为jpg或png格式。pdf.js是Mozilla开源的一个js库,无需任何本地支持就可以在浏览器上显示pdf文档。
15856 1
|
12月前
|
JavaScript
在vue3中(vite)引入unocss,安装配置unocss
在vue3中(vite)引入unocss,安装配置unocss
|
数据采集 JavaScript 搜索推荐
我们一起聊聊如何对Vue项目进行搜索引擎优化
【9月更文挑战第4天】Vue 项目的搜索引擎优化(SEO)较为复杂,因其内容默认由 JavaScript 渲染,部分搜索引擎难以索引。为提升 SEO 效果,可采用服务器端渲染(SSR)或预渲染,使用 Nuxt.js 或 Vue Server Renderer 实现 SSR,或利用 Prerender SPA Plugin 预渲染静态 HTML。此外,动态管理 Meta 标签、优化静态内容与 Sitemap、懒加载、图片优化、提升页面速度、设置正确的路由模式、使用结构化数据及构建良好外链均有益于 SEO。
447 11
|
API
Pinia 实用教程【Vue3 状态管理】状态持久化 pinia-plugin-persistedstate,异步Action,storeToRefs(),修改State的 $patch,$reset
Pinia 实用教程【Vue3 状态管理】状态持久化 pinia-plugin-persistedstate,异步Action,storeToRefs(),修改State的 $patch,$reset
3405 1
|
JavaScript
Nuxt3 实战 (四):安装 Nuxt UI 和配置 Typescript 类型检查
这篇文章介绍了在项目中安装和配置Nuxt UI以及TypeScript的步骤。作者在前言中提到考虑了AntDesignVue和Element-Plus,但最终选择了NuxtUI,因为它更适合年轻化的项目,并且与Nuxt兼容。安装Nuxt UI需要执行一系列命令,同时会自动安装一些相关模块。然后,可以在Nuxt应用中使用Nuxt UI的所有组件和可组合函数。此外,还介绍了如何添加图标库和配置TypeScript。
445 0
Nuxt3 实战 (四):安装 Nuxt UI 和配置 Typescript 类型检查
|
JavaScript 安全 网络安全
Nuxt.js 速成(含使用宝塔实现nuxt项目部署)
Nuxt.js 速成(含使用宝塔实现nuxt项目部署)
1334 0