TypeScript环境下fastify-cors插件报origin未定义错误如何解决

问题原因 #

1. 首次代码origin未定义报错原因 #

你使用的异步配置写法漏了接收请求参数，fastify-cors的异步配置函数会传入当前请求的request对象，origin需要从request的headers中提取，你既没有定义该变量也没有主动提取，自然会触发未定义报错。

2. 非异步写法origin为undefined的原因 #

Origin是浏览器仅在跨域请求时才会主动携带的请求头，以下场景origin都会为空：

• 同域发起的请求
• Postman、curl等工具直接发起的未手动添加Origin头的请求
• 浏览器地址栏直接输入地址访问的GET请求
  如果你测试时属于上述场景，拿到的origin自然是undefined。

解决方案 #

严格TS环境下的异步配置正确写法 #

import fp from 'fastify-plugin';
import cors from 'fastify-cors';
import type { FastifyRequest } from 'fastify';

export default fp(async (fastify) => {
  fastify.register(cors, (req: FastifyRequest) => {
    const origin = req.headers.origin;
    let corsOptions;
    // 可根据业务需求调整origin为空时的处理逻辑，这里示例为同域请求直接放行
    if (!origin || /localhost/.test(origin)) {
      corsOptions = { origin: true };
    } else if (origin === 'https://www.mywebsite.com') {
      corsOptions = { origin: true };
    } else {
      corsOptions = { origin: false };
    }
    return corsOptions;
  });
});

严格TS环境下的非异步配置正确写法 #

import fp from 'fastify-plugin';
import cors from 'fastify-cors';

export default fp(async (fastify) => {
  fastify.register(cors, {
    origin: (origin: string | undefined, callback) => {
      // 可根据业务需求调整origin为空时的处理逻辑
      if (!origin || /localhost/.test(origin) || origin === 'https://www.mywebsite.com') {
        callback(null, true);
      } else {
        callback(new Error('Not allowed by CORS'), false);
      }
    },
  });
});

注意事项 #

• 若需要禁止无Origin头的请求，直接删除判断逻辑中!origin的分支即可
• 生产环境的允许源地址需要补全https://等协议前缀，避免匹配错误
• TS类型定义中origin本身就是可选值，类型为string | undefined，按上述写法标注类型后不会再触发类型报错

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