Firebase托管和Firebase云功能的CORS问题

Question

有很多与此问题类似的问题，例如：

Enabling CORS in Cloud Functions for Firebase

但是，其中提供的所有答案都无法解决我的问题，并且它们并没有专门处理res.render()函数的回调的响应。

我正在尝试使用JS Fetch API从客户端JavaScript调用Firebase Cloud Function，但是我收到错误消息

Access to fetch at [URL] from origin [URL] has been blocked by CORS Policy. 
No 'Access-Control-Allow-Origin' header is present on the requested resource.

此函数应将渲染的车把模板的HTML返回给客户端以使用innerHTML进行注入。

实际上，这是一个CORS问题，因此我尝试同时使用CORS Express中间件和手动设置标头。

更确切地说，我在views目录中有一个标准的Handlebars Template。包含以下代码片段的文件包含一个全局上下文变量，该变量是被传递给模板进行渲染的对象。由于模板中的数据基于每个用户而有所不同，因此我最终将更改此context变量以在请求正文中发送。

从那里，我想将编译后的模板的HTML发送给客户端，以注入到innerHTML的{​​{1}}中。

尝试一个

div

尝试两次

const cors = require('cors')({ origin: true });

app.get('/my-route', (req, res) => {
    return cors(req, res, () => {
        res.render('view-report-template', context, (err, html) => {
        res.status(200).send(html);
    });
});

尝试三

const cors = require('cors')({ origin: true });

app.get('/my-route', (req, res) => {    
    res.render('view-report-template', context, (err, html) => {
        res.status(200).send(html);
    });
});

app.use(cors);

尝试四次

app.use((req, res, next) => {
    res.header("Access-Control-Allow-Origin", "*");
    res.header('Access-Control-Allow-Methods', 'DELETE, PUT, GET, POST');
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, 
Content-Type, Accept");   
    next();
});

app.get('/my-route', (req, res) => {    
    res.render('view-report-template', context, (err, html) => {
        res.status(200).send(html);
    });
});

尝试五次

app.use((req, res, next) => {
    res.header("Access-Control-Allow-Origin", "*")
    res.header(
        "Access-Control-Allow-Headers",
        "Origin, X-Requested-With, Content-Type, Accept, Authorization"
    );
    if(req.method === 'OPTIONS'){
        res.header('Access-Control-Allow-Methods', 'PUT, POST, PATCH, 
DELETE, GET'); 
        return res.status(200).json({});
    }
    next(); 
});

app.get('/my-route', (req, res) => {    
    res.render('view-report-template', context, (err, html) => {
        res.status(200).send(html);
    });
});

Express应用程序是按常规（app.get('/my-route', (req, res) => { res.set('Access-Control-Allow-Origin', '*'); res.status(200).send(html); }); ）创建的，`），功能路由的导出如下：

const app = require('express

不幸的是，这些方法都不起作用。我的客户端exports.app = functions.https.onRequest(app); // Where app contains above routes. 代码如下：

fetch()

发出这些请求时，查看Chrome开发者工具的网络面板会显示状态302，并且没有访问控制允许来源响应标头。

可以通过在fetch('https://us-central1-[project-id].cloudfunctions.net/my-route', { method: "GET", mode: "cors" }) .then(res => res.text()) .then(data => console.log(data)); 文件中设置重写来绕过CORS问题，然后我只需要使用正确的路由向应用程序的URL发出“获取GET请求”。由于没有跨域的东西，因此我成功地获取了数据。但是话虽如此，我想了解为什么我减轻CORS问题的尝试失败了。

谢谢。