javascript - 有没有办法使用 'unload\navigator.sendBeacon' + 'GraphQL' 将数据发送到服务器？

Question

在选项卡\浏览器关闭时，我需要将数据发送到服务器。我找到了 this answer (基于 this blog )建议使用 sendBeacon。 Here显示了必须如何准备数据才能通过 Ajax 将它们发送到服务器。我重复了答案中的结构:

window.addEventListener('unload', this.sendDataToServer, false)

sendDataToServer () {
    myData = JSON.stringify({
    'mutation': `mutation EmailAuth($email: String!, $password: String!) {
        getOrCreateUser(email: $email, password: $password) {
        token
        }
    }
    `,
    'variables': {email: 'test@test.net', password: 'Test'}
    })

    navigator.sendBeacon('http://localhost:8000/graphql', myData)
}

在这种情况下，Django 显示:"POST/graphql HTTP/1.1"400 53

我也在网上找到了Blob的版本:

window.addEventListener('unload', this.sendDataToServer, false)

sendDataToServer () {
    let headers = {
        type: 'application/json'
    }
    let myBlob = new Blob([JSON.stringify({
        'mutation': `mutation EmailAuth($email: String!, $password: String!) {
            getOrCreateUser(email: $email, password: $password) {
            token
            }
        }
        `,
        'variables': {email: 'test@test.net', password: 'Test'}
    })], headers)

    navigator.sendBeacon('http://localhost:8000/graphql', myBlob)
}

但在这种情况下，Django 根本没有任何反应。

如何将前端的数据打包成 GraphQL 格式并以服务器端可以接受的方式将其放入 sendBeacon 中？

Answer 1

在使用按钮而不是 unload 的帮助下，找到了为什么 Blob 不起作用。问题出在 chrome 浏览器上。控制台显示:Uncaught DOMException: Failed to execute 'sendBeacon' on 'Navigator': sendBeacon() with blob whose type is not any of the CORS-safelisted values for Content-Type 请求 header 暂时禁用。有关详细信息，请参阅 http://crbug.com/490015。

Django 正在等待application/json 类型的请求，根据link from error不安全。

对于 Firefox，可以使用 Django 的包 corsheaders 并在设置中添加 CORS_ALLOW_CREDENTIALS = True 来解决此问题。