如何为Nuxt API代理添加i18n区域标签？

要实现将Nuxt当前的i18n区域标签自动附加到代理请求的后端URL中，你可以通过Nitro服务器中间件动态处理请求，替代静态的devProxy配置，具体步骤如下：

1. 创建服务器中间件 #

在项目根目录下新建server/middleware/api-proxy.ts文件（如果没有server/middleware目录则手动创建），写入以下代码：

import { createProxyMiddleware } from 'http-proxy-middleware';
import { useRequestHeaders } from 'h3';

export default defineEventHandler(async (event) => {
  // 初始化默认区域标签
  let locale = 'en';
  const headers = useRequestHeaders(event);

  // 从i18n的cookie中获取当前区域标签（适用于cookie策略的i18n）
  if (headers.cookie) {
    const cookieMatch = headers.cookie.match(/i18n_redirected=([a-z-]+)/);
    if (cookieMatch) {
      locale = cookieMatch[1];
    }
  }

  // 如果你的i18n是路径前缀模式，可改用从URL中提取区域标签：
  // const urlSegments = event.node.req.url?.split('/') || [];
  // const validLocales = ['en', 'de', 'fr', 'ru'];
  // if (urlSegments[1] && validLocales.includes(urlSegments[1])) {
  //   locale = urlSegments[1];
  // }

  // 配置代理
  const proxy = createProxyMiddleware({
    target: `http://127.0.0.1:8000/${locale}/`,
    changeOrigin: true,
    pathRewrite: {
      '^/api': '', // 移除/api前缀，后端直接接收区域标签后的路径
    },
  });

  return new Promise((resolve, reject) => {
    proxy(event.node.req, event.node.res, (err) => {
      if (err) reject(err);
      else resolve();
    });
  });
});

2. 修改Nuxt配置 #

打开nuxt.config.ts，移除原来的nitro.devProxy配置，并更新i18n的区域列表（添加你需要的fr、ru等）：

export default defineNuxtConfig({
    compatibilityDate: '2024-04-03',
    devtools: { enabled: true },

    modules: ['@nuxtjs/tailwindcss', '@nuxtjs/i18n'],

    // 移除原有的nitro.devProxy配置

    i18n: {
        locales: ['en', 'de', 'fr', 'ru'],
        defaultLocale: 'en',
        // 若使用路径前缀模式，启用以下配置
        // strategy: 'prefix_except_default',
    },
});

关键说明 #

• 区域标签的获取方式：根据你的i18n策略选择——cookie模式用cookie解析，路径前缀模式直接从URL提取，确保和Nuxt的i18n配置一致。
• 后端路径匹配：确保Django后端的区域标签路径（如/fr/hello）和Nuxt的区域代码完全对应，避免路径不匹配的问题。
• 测试验证：切换不同语言后，检查代理请求是否正确转发到对应区域的后端路径。

内容的提问来源于stack exchange，提问作者Leo Gall