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

经过测试,成功。

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

相关文章
|
安全 JavaScript 应用服务中间件
vue-cli搭建代理服务器,将请求转发到后台服务器
vue-cli搭建代理服务器,将请求转发到后台服务器
138 0
|
7月前
|
开发框架 搜索推荐 中间件
中间件应用路由和URL重写
【5月更文挑战第2天】中间件应用路由和URL重写
52 3
中间件应用路由和URL重写
|
7月前
|
JavaScript API
本地开发环境请求服务器接口跨域的问题(vue的问题)
本地开发环境请求服务器接口跨域的问题(vue的问题)
553 1
跨域问题以及经过网关二次转发重复跨域问题完美解决
跨域问题以及经过网关二次转发重复跨域问题完美解决
|
7月前
|
JavaScript API
解决Vue项目请求接口跨域的问题,配置Vue项目index.js代理请求服务器端接口
解决Vue项目请求接口跨域的问题,配置Vue项目index.js代理请求服务器端接口
解决Vue项目请求接口跨域的问题,配置Vue项目index.js代理请求服务器端接口
|
前端开发
网关的cors跨域配置
网关的cors跨域配置
140 0
|
JavaScript 前端开发 应用服务中间件
Vue 前端接口跨域,本地 Nginx 代理配置
Vue 前端接口跨域,本地 Nginx 代理配置
458 0
|
前端开发 JavaScript Java
关于前端路由我所知道的
关于前端路由我所知道的
90 0
|
前端开发 JavaScript Java
当遇到跨域开发时, 我们如何处理好前后端配置和请求库封装(koa/axios版)
我们知道很多大型项目都或多或少的采用跨域的模式开发, 以达到服务和资源的解耦和高效利用. 在大前端盛行的今天更为如此, 前端工程师可以通过nodejs或者Nginx轻松搭建起web服务器.这个时候我们只需要请求后端服务器的接口即可实现系统的业务功能开发.这个过程中会涉及到web页面向API服务器的跨域访问(由于受到浏览器的同源策略,但是业界已有很多解决方案,接下来会介绍).通过这种开发模式使得我们真正的实现了前后端完全分离.
411 0