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

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

news 2025/7/9 17:58:17

当您运行 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

处理函数约定：
- 每个文件必须导出 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