nuxt3：接口转发，实现跨域-Toy模板网

这篇具有很好参考价值的文章主要介绍了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
  }
})

经过测试，成功。

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

参考链接：

nuxt3：nitro devProxy（本地代理）_snow@li的博客-CSDN博客

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

基于Nuxt3的API接口服务网站_愧怍12的博客-CSDN博客_nuxt服务端接口文章来源地址https://www.toymoban.com/news/detail-630517.html

到了这里，关于nuxt3：接口转发，实现跨域的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！