一、背景
当接口请求的域名和项目适用的域名不一致时候,可以适用接口转发的方法实现跨域。
原理:服务的请求接口是不跨域的,nuxt3服务端请求接口后转发给localhost:3000。
本地开发,生产环境均可以使用。
二、理解服务器中间件
Nuxt 将自动读取~/server/middleware
中的任何文件,以便为您的项目创建服务器中间件。这些文件将在每个请求上运行,这与映射到其自己路由的API routes不同。这通常是为了让您能够向所有响应添加公共标头、记录响应或修改传入请求对象以供以后在请求链中使用。
本文我们使用服务器中间件返回接口响应,实现跨域。
三、代码
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 } })
经过测试,成功。
四、欢迎交流指正,关注我,一起学习。