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

经过测试，成功。

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

参考链接：

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

基于Nuxt3的API接口服务网站_愧怍12的博客-CSDN博客_nuxt服务端接口