Astro 2.0.16构建后Vite代理失效问题求助

Vite的server.proxy仅作用于开发阶段的本地服务器，构建为静态文件后没有后端服务支撑，代理自然失效。以下是几种可行的解决方案：

方案一：使用Astro API路由 + 服务器适配器 #

通过创建Astro API路由作为请求转发中间层，适配生产环境的服务器运行模式：

1. 创建API路由文件src/pages/api/products/[...params].js：

export async function get({ params, request }) {
  // 拼接原API路径
  const targetPath = params.params?.join('/') || '';
  const targetUrl = `https://external.api/${targetPath}`;

  // 转发请求并保留响应信息
  const response = await fetch(targetUrl, {
    method: request.method,
    headers: {
      // 按需复制请求头，排除可能导致问题的字段
      ...Object.fromEntries(request.headers.entries()),
      'Host': new URL(targetUrl).host,
    },
    body: request.method !== 'GET' ? await request.text() : undefined,
  });

  return new Response(response.body, {
    status: response.status,
    headers: response.headers,
  });
}

2. 安装并配置Node适配器，支持服务器端运行：

npm install @astrojs/node

修改astro.config.js：

import { defineConfig } from 'astro/config';
import node from '@astrojs/node';

export default defineConfig({
  output: 'server',
  adapter: node({
    mode: 'standalone',
  }),
  // 保留原有其他配置
});

构建后通过node dist/server/entry.mjs启动服务，API路由会自动转发请求，规避CORS问题。

方案二：利用部署平台的重写/代理规则 #

如果部署到Netlify、Vercel等平台，可以直接通过平台配置实现代理，无需额外服务器逻辑：

Netlify #

在项目根目录创建netlify.toml：

[[redirects]]
  from = "/api/products/*"
  to = "https://external.api/:splat"
  status = 200
  force = true
  headers = {
    "Access-Control-Allow-Origin" = "*"
  }

Vercel #

在项目根目录创建vercel.json：

{
  "rewrites": [
    {
      "source": "/api/products/(.*)",
      "destination": "https://external.api/$1"
    }
  ]
}

平台会在请求到达时自动转发，前端代码无需修改。

方案三：要求外部API开启CORS #

如果有权限联系外部API维护者，直接在API响应头中添加Access-Control-Allow-Origin字段：

• 允许指定域名：Access-Control-Allow-Origin: https://your-domain.com
• 允许所有域名（仅测试环境推荐）：Access-Control-Allow-Origin: *

这种方式无需任何前端或代理配置，是最直接的解决方案。

内容的提问来源于stack exchange，提问作者David Rodrigues