Fastify框架POST接口CORS跨域错误排查求助

问题根源 #

你的GET接口正常是因为它属于简单请求，不需要发送OPTIONS预请求，直接应用了@fastify/cors配置的Access-Control-Allow-Origin头；而POST接口触发了OPTIONS预请求，这个预请求没有被你的CORS配置正确处理，导致返回了默认的*，和credentials: true冲突引发错误。

具体解决步骤 #

1. 确保CORS插件在所有路由之前注册 #

Fastify的插件和路由注册是按顺序执行的，如果你的路由（尤其是/api/v1/create-user）在@fastify/cors插件注册之前定义，对应的OPTIONS预请求会绕过CORS配置，使用默认的通配符*。调整代码顺序：

import Fastify, { FastifyInstance, FastifyServerOptions } from 'fastify';
import cors from '@fastify/cors';

const fastify = Fastify({ /* 你的服务器配置 */ });

// 先注册CORS插件，再注册所有路由
fastify.register(cors, {
   origin: "https://dev.example.com",
   credentials: true,
});

// 然后注册你的路由
fastify.get('/api/v1/users', async (request, reply) => {
  // 接口逻辑
});

fastify.post('/api/v1/create-user', async (request, reply) => {
  // 接口逻辑
});

// 启动服务器
fastify.listen({ port: 3000 }, (err) => {
  if (err) throw err;
});

2. 显式指定允许的方法（可选） #

如果上述调整后仍有问题，可以在CORS配置中显式列出允许的HTTP方法，确保OPTIONS预请求能正确匹配：

fastify.register(cors, {
   origin: "https://dev.example.com",
   credentials: true,
   methods: ['GET', 'POST', 'OPTIONS'] // 包含OPTIONS方法
});

3. 使用动态Origin函数（兜底方案） #

如果你的环境需要更灵活的Origin匹配，改用函数形式返回Origin，确保预请求也能正确获取到对应的值：

fastify.register(cors, {
  origin: (origin, cb) => {
    // 只允许指定的Origin
    if (origin === "https://dev.example.com") {
      cb(null, true);
      return;
    }
    cb(new Error('Not allowed by CORS'));
  },
  credentials: true
});

验证方法 #

发送OPTIONS请求到https://api-dev.example.com/api/v1/create-user，检查响应头的Access-Control-Allow-Origin是否为https://dev.example.com，而不是*。

内容的提问来源于stack exchange，提问作者Not A Robot