当前位置: 首页 > news >正文

Nuxt.js 静态生成中的跨域问题解决方案

当您运行 npm run generate 生成静态页面时,Vite 的代理服务器确实无法使用,因为生成阶段是在 Node.js 环境中执行的构建过程。但别担心,我将为您提供一套完整的解决方案来处理构建阶段的跨域问题。

核心解决方案


1. 构建阶段:使用服务端中转 API(推荐)

在构建阶段通过 Nuxt 的 server 路由中转请求,避开跨域限制:

// server/api/products.ts
export default defineEventHandler(async (event) => {// 从环境变量获取API地址const apiBase = useRuntimeConfig().public.apiBase// 构建阶段直接调用API(无跨域问题)return await $fetch(`${apiBase}/products`, {headers: {'Authorization': `Bearer ${process.env.API_TOKEN}`}}).catch(() => ([])) // 添加错误处理
})

为什么 server/api/products.ts是服务端中转 API?

文件位于 server/api 目录下,这是 Nuxt 3 中定义服务器端 API 的标准位置。
文件名为 products.ts,表示它处理的是与 /api/products 路径相关的请求

在这个处理函数中,它接收来自客户端的请求(在构建阶段,这个请求来自 Nuxt 的构建进程),然后它自己作为客户端去请求另一个后端服务(${apiBase}/products)。
这个后端服务可能是你真正的业务 API,可能运行在另一个域名或端口上(比如 http://localhost:3001 或 https://api.example.com)。

在构建阶段(npm run generate),Nuxt 是在 Node.js 环境中运行的,所以它直接发起 HTTP 请求(使用 $fetch)到后端服务,这不存在浏览器的同源策略限制(跨域问题只存在于浏览器中)。
在开发阶段,我们通过 Vite 的代理配置(在 nuxt.config.ts 中)将客户端对 /api/products 的请求代理到真正的后端服务,同样避免了浏览器的跨域问题。


2. 页面组件中调用中转 API
<!-- pages/products.vue -->
<script setup>
// 构建时调用的中转API(不存在跨域问题)
const { data: products } = await useAsyncData('products',() => $fetch('/api/products')
)
</script>

​当 Nuxt.js 执行 $fetch('/api/products') 时,它会自动匹配并调用 server/api/products.ts 中定义的中转 API 处理程序​​。这是一个 Nuxt.js 的核心约定机制。

详细的路径匹配规则:
​​目录结构映射​​:

  • 所有放在 server/api/ 目录下的 .ts 文件都会自动注册为 API 端点
  • 文件路径直接对应路由路径:

​​具体匹配过程​​:

文件路径

对应的API路由

server/api/products.ts/api/products
server/api/products/index.ts/api/products
server/api/products/[id].ts  /api/products/:id
server/api/categories/featured.ts /api/categories/featured

​​在页面中调用​​:
// 调用以下路径的API:

$fetch('/api/products')server/api/products.ts
$fetch('/api/products/123')server/api/products/[id].ts
$fetch('/api/categories/featured')

server/api/categories/featured.ts

  1. 处理函数约定​​:

    • 每个文件必须导出 default defineEventHandler 作为请求处理函数
    • Nuxt 自动将请求路由到对应的处理程序
// server/api/products.ts 
export default defineEventHandler(async (event) => { // 所有对 /api/products 的请求都会到达这里 
})

3. 配置环境变量
# .env.production
NUXT_PUBLIC_API_BASE=https://production-api.com
API_TOKEN=your_prod_token# .env.development
NUXT_PUBLIC_API_BASE=http://localhost:3000

4,开发环境 Vite 代理配置
// nuxt.config.ts
export default defineNuxtConfig({vite: {server: {proxy: {// 开发环境代理配置'/api/': {target: process.env.NUXT_PUBLIC_API_BASE || 'http://localhost:3000',changeOrigin: true,rewrite: path => path.replace(/^\/api\//, '')}}}},// 通用配置runtimeConfig: {public: {apiBase: process.env.NUXT_PUBLIC_API_BASE}}
})

5.构建阶段工作流程详解
构建流程 (npm run generate)│├─ 1. 加载 nuxt.config.ts│     读取 runtimeConfig.public.apiBase│├─ 2. 扫描 pages/ 目录│     识别出需要使用数据的页面│├─ 3. 执行页面中的 useAsyncData/useFetch│     → 调用 /api/products│        ↓├─ 4. 路由到 server/api/products.ts│     → 使用 $fetch 访问外部 API│        ↓├─ 5. 获取数据 → 渲染页面 → 生成静态HTML│└─ 6. 输出静态文件到 .output/public
6.创建统一的 API 代理层​​:

http://www.dtcms.com/a/270428.html

相关文章:

  • C++学习笔记之数组、指针和字符串
  • 【PyTorch】PyTorch中torch.nn模块的激活函数
  • 项目Win系统下可正常获取Header字段,但是到了linux、docker部署后无法获取
  • python基础day08
  • linux wsl2 docker 镜像复用快速方法
  • 【读代码】GLM-4.1V-Thinking:开源多模态推理模型的创新实践
  • 基于模板设计模式开发优惠券推送功能以及对过期优惠卷进行定时清理
  • C++ 遍历可变参数的几种方法
  • 数据库表设计:图片存储与自定义数据类型的实战指南
  • C语言宏替换比较练习
  • 暑假算法日记第四天
  • 5.6.2、ZeroMQ源码分析
  • 利用AI Agent实现精准的数据分析
  • ARM环境openEuler2203sp4上部署19c单机问题-持续更新
  • VM上创建虚拟机以及安装RHEL9操作系统并ssh远程连接
  • 大模型系列——RAG-Anything:开启多模态 RAG 的新纪元,让文档“活”起来!
  • Proface触摸屏编程软件(GP-Pro EX)介绍及下载
  • 金融行业信息
  • 力扣-75.颜色分类
  • Sentinel入门篇【流量治理】
  • 行业实践案例:医疗行业数据治理的挑战与突破
  • 【RAG知识库实践】数据源Data Source
  • ABP VNext + .NET Minimal API:极简微服务快速开发
  • B. Shrinking Array/缩小数组
  • Web后端实战:(部门管理)
  • 数据结构*搜索树
  • 二极管常见种类及基本原理
  • 【牛客刷题】小红的red字符串
  • MyBatis-Plus:提升数据库操作效率的利器
  • AB实验的长期影响