部署SvelteKit到Firebase Hosting时，如何将Cookie转发至Cloud Function

方案一：配置子域名(api..web.app)指向Cloud Function+重写规则 #

这是同域化解决跨域Cookie问题的最优方案，步骤如下：

• 添加子域名并关联Cloud Function
  进入Firebase控制台「Hosting」→「自定义域名」，添加子域名api.<Project>.web.app，完成域名验证与SSL配置；再到Cloud Functions控制台找到对应SvelteKit服务函数，在「触发器」中新增HTTP触发器，绑定该子域名。
• 修改Firebase Hosting重写规则
  更新firebase.json的hosting.rewrites，将API请求转发到子域名对应的函数：

  {
    "hosting": {
      "public": "build",
      "rewrites": [
        {
          "source": "/api/**",
          "run": {
            "serviceId": "<你的Cloud Function服务ID>",
            "region": "<函数所在区域>"
          }
        },
        {
          "source": "**",
          "destination": "/index.html"
        }
      ]
    }
  }
  

• 调整SvelteKit请求路径
  在hooks.server.js中统一设置请求的base路径为/api，并确保携带Cookie：

  export async function handle({ event, resolve }) {
    event.fetch = async (url, options) => {
      const fullUrl = new URL(url, '/api');
      return fetch(fullUrl, {
        ...options,
        credentials: 'include'
      });
    };
    return resolve(event);
  }
  

方案二：配置CORS头与Cookie跨域属性 #

若暂时不想修改域名，可通过设置跨域相关属性解决，但需浏览器支持跨域Cookie规则：

• 在Cloud Function中添加CORS响应头
  在hooks.server.js中为响应添加允许主域名跨域的头：

  export async function handle({ event, resolve }) {
    const response = await resolve(event);
    response.headers.set('Access-Control-Allow-Origin', 'https://<Project>.web.app');
    response.headers.set('Access-Control-Allow-Credentials', 'true');
    response.headers.set('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
    response.headers.set('Access-Control-Allow-Headers', 'Content-Type, Authorization');
    return response;
  }
  

• 设置Cookie的跨域兼容属性
  设置Cookie时必须添加SameSite=None、Secure和根域属性：

  import { setCookie } from '@sveltejs/kit';
  
  export async function load({ cookies }) {
    setCookie(cookies, 'session_id', 'xxx', {
      path: '/',
      domain: '.web.app',
      secure: true,
      sameSite: 'none',
      httpOnly: true
    });
  }
  

  注：SameSite=None必须配合Secure，仅HTTPS环境生效（Firebase部署域名默认满足）。

方案三：使用Firebase集成式部署（推荐） #

放弃webframeworks扩展，直接用SvelteKit的Firebase适配器部署，实现请求同域：

• 安装并配置适配器
  安装依赖：

  npm install svelte-adapter-firebase --save-dev
  

  修改svelte.config.js：

  import adapter from 'svelte-adapter-firebase';
  
  export default {
    kit: {
      adapter: adapter({
        out: 'build',
        functionName: 'sveltekit-server'
      })
    }
  };
  

• 构建部署
  执行npm run build构建产物，再用firebase deploy部署，所有请求将通过<Project>.web.app转发，自然避免跨域Cookie问题。

内容的提问来源于stack exchange，提问作者M. Heus