在选项卡\浏览器关闭上,我需要将数据发送到服务器。我发现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: '[email protected]', 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: '[email protected]', password: 'Test'}
})], headers)
navigator.sendBeacon('http://localhost:8000/graphql', myBlob)
}
但是在这种情况下,根本没有Django的任何反应。
如何将前端的数据包装为GraphQL格式,并以某种方式将其放入
sendBeacon
,服务器端可以接受? 最佳答案
在使用按钮而不是Blob
的帮助下找到了为什么unload
不起作用的原因。问题出在chrome浏览器上。控制台显示:Uncaught DOMException: Failed to execute 'sendBeacon' on 'Navigator': sendBeacon() with a Blob whose type is not any of the CORS-safelisted values for the Content-Type request header is disabled temporarily. See http://crbug.com/490015 for details.
Django正在等待application/json
类型的请求,根据link from error,这是不安全的。
对于Firefox,可以使用Django的软件包corsheaders
修复此问题,并将CORS_ALLOW_CREDENTIALS = True
添加到设置中。
关于javascript - 有没有一种方法可以使用“unload\navigator.sendBeacon” +“GraphQL”将数据发送到服务器?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/49414923/