如何绕过 CORS 从 Blazor WebAssembly 调用 Firestore？（通话时间为 JavaScript）

Question

我正在使用 Blazor WebAssembly 构建一个简单的登录页面，并利用 JSInterop 编写 JS 函数以便使用 Firebase/Firestore。我有一个函数，它使用 Firebase 方法通过简单的自定义表单让用户登录，然后获取 id 令牌和用户 id，然后传递到另一个请求访问 Firestore 的函数。通过 Postman 一切正常，但是当我运行在我的应用程序中完成此过程时，我被 CORS 错误阻止：

Access to fetch at 'https://firestore.googleapis.com/v1/projects/trailblazor-
5ba6f/databases/(default)/documents/users/JJNlKtvGMcUm7MjfkuJy6WdlMiO2' from origin 
'https://localhost:44318' has been blocked by CORS policy: Response to preflight request doesn't pass
access control check: It does not have HTTP ok status.

这是我请求访问 Firestore 中的用户数据的代码（传入 id 令牌和用户 id）：

async function sendToken(idToken, userId) {
    try {
        const response = await fetch(`https://firestore.googleapis.com/v1/projects/trailblazor-5ba6f/databases/(default)/documents/users/${userId}`, {
            headers: new Headers({
                'x-api-key': '**omitted for security**',
                'Authorization': 'Bearer ' + idToken,
                'Access-Control-Allow-Origin': 'https://localhost:44318',
                'Access-Control-Allow-Credentials': 'true',
                'Access-Control-Allow-Headers': 'Content-Type',
                'Content-Type': 'application/json'
            }),
            mode: 'cors'
        });
        const receivedResponse = await response.json();
        if (receivedResponse != null) {
            console.log(receivedResponse);
        }
    } catch (error) {
        return error.message;
    }
}

如您所见，我已经尝试了很多 headers，但到目前为止没有任何效果。即使我启用的 CORS-enabling Chrome 扩展也无济于事。我考虑过制作代理服务器，但我不确定这是否有意义。我已经查看了 Firebase 文档，这应该是我访问 Firestore 的方式，就像我说的，一切都在 Postman 中完美运行（当然）。

Answer 1

首先，CORS 由服务器管理。您在请求中添加一些 header 的事实无济于事。如果允许 CORS 请求，它服务器 根据传入请求的域设置适当的 headers。

你做代理服务器是对的。您可以使用 https://cors-anywhere.herokuapp.com/corsdemo, which is a proxy server for frontend developers to make CORS requests. The github page is here

如何绕过 CORS 从 Blazor WebAssembly 调用 Firestore？（通话时间为 JavaScript）

How can I bypass CORS to make a call to Firestore from Blazor WebAssembly? (call is in in JavaScript)

javascript

cors

firebase

google-cloud-firestore

blazor-webassembly

如何绕过 CORS 从 Blazor WebAssembly 调用 Firestore？ （通话时间为 JavaScript）

How can I bypass CORS to make a call to Firestore from Blazor WebAssembly? (call is in in JavaScript)

javascript

cors

firebase

google-cloud-firestore

blazor-webassembly

如何绕过 CORS 从 Blazor WebAssembly 调用 Firestore？（通话时间为 JavaScript）