如何在Astro中从请求获取浏览器语言？

1. 获取请求头中的语言偏好 #

浏览器会通过Accept-Language请求头发送用户的语言偏好，你可以用和获取Cookie相同的方式拿到这个头：

const acceptLanguage = Astro.request.headers.get('Accept-Language');

这个值通常是类似en-US,en;q=0.9,zh-CN;q=0.8的格式，其中q代表权重，数值越高优先级越高。

2. 解析语言偏好，提取优先语言 #

你需要解析这个字符串，拿到用户最优先的语言。这里可以写一段简单的解析逻辑：

function getPreferredLanguage(acceptLanguageHeader) {
  if (!acceptLanguageHeader) return 'en'; // 设置默认语言

  return acceptLanguageHeader
    .split(',')
    .map(lang => {
      const [code, weight = '1.0'] = lang.trim().split(';q=');
      return { code: code.split('-')[0], weight: parseFloat(weight) };
    })
    .sort((a, b) => b.weight - a.weight)
    .shift().code;
}

const preferredLang = getPreferredLanguage(Astro.request.headers.get('Accept-Language'));

这段代码会提取出优先级最高的语言代码（比如en或zh）。

3. 重定向到对应语言路由 #

拿到优先语言后，你可以在Astro的页面或布局组件中进行重定向，示例如下：

// 在页面frontmatter或布局组件中
import { redirect } from 'astro';

const preferredLang = getPreferredLanguage(Astro.request.headers.get('Accept-Language'));
// 定义你支持的语言列表
const supportedLangs = ['en', 'zh'];

// 如果用户访问的路径未匹配优先语言路由，则跳转
if (supportedLangs.includes(preferredLang) && !Astro.url.pathname.startsWith(`/${preferredLang}`)) {
  return redirect(`/${preferredLang}${Astro.url.pathname}`);
}

如果用户访问根路径，会自动跳转到对应语言的路由；如果已经在对应语言路由下，则不会重复跳转。

补充说明 #

你之前的误区可能是以为Astro提供了封装好的语言检测方法，但实际上Astro并没有内置这个功能，不过通过直接操作Accept-Language请求头，再配合简单的解析逻辑就能实现需求。另外，如果你需要结合Cookie存储用户手动选择的语言（覆盖请求头的偏好），可以把Cookie的判断逻辑加在前面，优先使用用户手动设置的语言。

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