如何为多个域名配置`Access-Control-Allow-Origin`跨域响应头

你提到的直接在Access-Control-Allow-Origin头中用逗号分隔多个域名的写法不符合CORS标准规范，浏览器无法识别这种配置，跨域请求会直接被拦截。

正确配置方案 #

CORS标准规定Access-Control-Allow-Origin头仅支持三种取值：单个完整源地址、*通配符、null，不支持直接拼接多个源地址。在Next.js中要实现多个指定域名跨域放行，需要在API路由逻辑中动态判断请求来源，匹配到允许的域名后再设置对应响应头：

// 允许跨域的域名列表
const ALLOWED_ORIGINS = [
  'https://foo1.example',
  'https://foo2.example',
  'https://foo3.example'
]

export default function handler(req, res) {
  const requestOrigin = req.headers.origin
  // 匹配到允许的域名后设置对应的CORS头
  if (ALLOWED_ORIGINS.includes(requestOrigin)) {
    res.setHeader('Access-Control-Allow-Origin', requestOrigin)
  }
  // 按需配置其他CORS规则
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS')
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization')

  // 处理OPTIONS类型的预检请求
  if (req.method === 'OPTIONS') {
    return res.status(200).end()
  }

  // 后续业务逻辑
  res.status(200).json({ data: '请求处理完成' })
}

注意事项 #

• 如果你的业务需要支持带凭证（Cookie、HTTP认证信息等）的跨域请求，不能使用*通配符，必须使用上述动态匹配来源的方案，同时额外添加配置res.setHeader('Access-Control-Allow-Credentials', 'true')。
• 本地开发阶段可以把前端本地服务地址（比如http://localhost:3000）加入允许域名列表，避免开发阶段出现跨域报错。

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