Firebase 功能 CORS 问题：尽管设置正确，但“Access-Control-Allow-Credentials”标头问题

Question

我在 Vite.js React 应用程序中使用 Firebase HTTPS 函数时遇到持续的 CORS 问题，特别是在尝试集成 OAuth 时。

问题： 当我尝试从前端向 Firebase 云函数发送请求时，会引发以下错误：

回调：1 从源“http://localhost:5173”获取“http://127.0.0.1:5001/my-project-id/us-central1/youtube/youtubeaccesstoken”的访问已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：响应中“Access-Control-Allow-Credentials”标头的值为“”，当请求的凭据模式为“include”时，该值必须为“true”。 `

我在我的提取请求中设置了credentials: 'include'，并且 Firebase 似乎没有返回所需的 Access-Control-Allow-Credentials: true 标头，即使我已尝试隐式和显式设置 CORS。

我尝试过的：

• Firebase功能设置：我使用了Firebase的onRequest和cors： true 允许 CORS

     
         const {
           onRequest
         } = require('firebase-functions/v2/https');
     
         exports.youtube = onRequest({
           timeoutSeconds: 360,
           cors: true
         }, (req, res) => {
           // Handle the preflight OPTIONS request
           if (req.method === 'OPTIONS') {
             res.set('Access-Control-Allow-Origin', 'http://localhost:5173');
             res.set('Access-Control-Allow-Methods', 'GET, POST');
             res.set('Access-Control-Allow-Headers', 'Authorization, Content-Type');
             res.set('Access-Control-Allow-Credentials', 'true');
             res.status(204).send('');
             return;
           }
     
           // Handle the actual request
           res.set('Access-Control-Allow-Origin', 'http://localhost:5173');
           res.set('Access-Control-Allow-Credentials', 'true');
     
           youtubeService(req, res);
         });
     
     

• 客户端获取：客户端获取请求设置为包含凭据：

fetch('http://127.0.0.1:5001/my-project-id/us-central1/youtube/youtubeaccesstoken', {
  method: 'POST',
  credentials: 'include',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    code,
    state,
    userId
  }),
});

• 我还尝试了一种不同的方法来实现我的 firebase 功能，因为我正在使用express。

const youtubeService = express();
youtubeService.use(express.json());
youtubeService.use(cookieParser());

const corsOptions = {
  origin: "http://localhost:5173", // Use specific origin instead of true
  methods: "GET,HEAD,PUT,PATCH,POST,DELETE,OPTIONS",
  credentials: true, // Allow credentials
  allowedHeaders: ["Content-Type", "Authorization"],
};

youtubeService.use(cors(corsOptions));

//and the rest of the REST endpoints





exports.youtube = onRequest({
    timeoutSeconds: 360,
    cors: true,
  },
  youtubeService
);

预期行为： Firebase 函数应允许跨域请求，返回必要的 CORS 标头，特别是在前端使用凭据时，Access-Control-Allow-Credentials: true。

需要考虑的事情：

• Firebase 应该隐式处理预检请求，但是 为了确定起见，我已明确设置它。
• 所有其他 CORS 标头似乎都工作正常，除了 访问控制允许凭据

.

Answer 1

如果您在函数配置中设置了

cors: true

，则根本不应该编写任何代码来处理 OPTIONS 请求或处理 cors 标头。 您也不应该尝试将 Express 应用程序与 cors 中间件一起使用。 函数框架会自动为您完成所有这些工作。

文档中提供了一个最小的示例。 请注意，示例代码只是正常处理请求，而不关心 cors 实现细节。 从最小的示例开始，确保它有效，然后根据需要添加更多代码。