nuxt3：接口转发，实现跨域

た入场券 2024-03-27 17:12 27阅读 0赞

**一、背景**

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

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

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

**二、理解服务器中间件**

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

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

[服务器目录(server) | Nuxt 3 - 中文文档][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
      }
    })

经过测试，成功。

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

**参考链接：**

[nuxt3：nitro devProxy（本地代理）\_snow@li的博客-CSDN博客][nuxt3_nitro devProxy_snow_li_-CSDN]

[服务器目录(server) | Nuxt 3 - 中文文档][server_ _ Nuxt 3 -]

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

[API routes]: https://v3.nuxtjs.org/docs/directory-structure/api
[server_ _ Nuxt 3 -]: https://www.nuxtjs.org.cn/directory-structure/server.html#%E6%8E%A5%E5%8F%A3%E8%B7%AF%E7%94%B1
[nuxt3_nitro devProxy_snow_li_-CSDN]: https://blog.csdn.net/snowball_li/article/details/128851469
[Nuxt3_API_12_-CSDN_nuxt]: https://blog.csdn.net/kuizuo12/article/details/125884279