如何在Qwik中使用cors？适配Qwik Endpoints的实现方案咨询

在Qwik的Endpoint中，你只能拿到RequestEvent对象，没法直接用Next.js那种Express风格的req/res，但可以通过两种方式处理CORS：

方案一：手动设置CORS响应头（简单场景） #

如果你的CORS规则不复杂，直接在Endpoint里手动添加响应头即可，无需额外依赖：

import type { RequestEvent } from '@builder.io/qwik-city';

export async function onRequest(event: RequestEvent) {
  // 允许的源，可替换为指定域名（比如'https://your-frontend.com'）
  event.response.headers.set('Access-Control-Allow-Origin', '*');
  // 允许的请求方法，和你之前的配置一致
  event.response.headers.set('Access-Control-Allow-Methods', 'POST, GET, HEAD');
  // 允许的请求头，根据业务需求调整
  event.response.headers.set('Access-Control-Allow-Headers', 'Content-Type');

  // 处理浏览器预检OPTIONS请求
  if (event.request.method === 'OPTIONS') {
    return event.response.status(200);
  }

  // 这里写你的业务逻辑
  return event.json({ message: '请求成功' });
}

方案二：适配cors库（复杂配置） #

如果需要用到cors库的高级配置（比如自定义源验证、凭据支持等），可以把RequestEvent包装成符合Express中间件要求的req/res对象：

1. 先安装依赖：

npm install cors

2. 在Endpoint中使用：

import cors from 'cors';
import type { RequestEvent } from '@builder.io/qwik-city';

// 和你之前的配置一致
const corsOptions = {
  methods: ['POST', 'GET', 'HEAD'],
  // 可添加其他cors库支持的配置，比如origin、credentials等
};

export async function onRequest(event: RequestEvent) {
  // 先处理预检OPTIONS请求
  if (event.request.method === 'OPTIONS') {
    event.response.headers.set('Access-Control-Allow-Origin', '*');
    event.response.headers.set('Access-Control-Allow-Methods', corsOptions.methods.join(','));
    event.response.headers.set('Access-Control-Allow-Headers', 'Content-Type');
    return event.response.status(200);
  }

  // 包装req/res对象适配cors中间件
  await new Promise<void>((resolve, reject) => {
    const adaptedRes = {
      setHeader: (name: string, value: string) => event.response.headers.set(name, value),
      getHeader: (name: string) => event.response.headers.get(name),
      end: resolve,
      statusCode: 200,
    };

    cors(corsOptions)(event.request as any, adaptedRes as any, (err?: Error) => {
      if (err) reject(err);
      else resolve();
    });
  });

  // 业务逻辑处理
  return event.json({ data: '处理完成' });
}

关键说明 #

• Qwik的RequestEvent.request就是原生的Request对象，可以直接传给cors库；
• 我们手动实现了res对象的核心方法（setHeader、end等），让cors库能正常设置响应头；
• 必须单独处理OPTIONS预检请求，否则浏览器会因权限检查失败而拦截后续请求。

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