使用navigation.sendBeacon发送application/json数据，预检成功但不发布

Question

我在使用 sendBeacon 将数据发布到服务器时遇到问题。

\n\n

它在 Chrome 中工作（因为 Chrome 似乎跳过预检），但在 Firefox 中，预检（选项）与请求标头一起发送：

\n\n

Host: example.com\nUser-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.12; rv:53.0) \nGecko/20100101 Firefox/53.0\nAccept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8\nAccept-Language: en-US,en;q=0.5\nAccept-Encoding: gzip, deflate, br\nAccess-Control-Request-Method: POST\nAccess-Control-Request-Headers: content-type\nOrigin: http://example.com\nConnection: keep-alive\n

\n\n

服务器的响应是 200：

\n\n

Date: Tue, 23 May 2017 15:53:56 GMT\nContent-Type: text/html; charset=utf-8\nSet-Cookie: __cfduid=df2864c1da991df4abc28d3e73db7ab8f1495554836;expires=Wed, 23-May-18 15:53:56 GMT; path=/; domain=.medialaben.no;HttpOnly\nX-Powered-By: Express\nAccess-Control-Allow-Origin: *\naccess-control-allow-credentials: true\naccess-control-allow-methods: GET,HEAD,PUT,PATCH,POST,DELETE\naccess-control-allow-headers: content-type,Authorization,Origin,Connection,Accept\nAllow: POST\nServer: cloudflare-nginx\ncf-ray: 363930e0688e3cfb-CPH\nContent-Encoding: gzip\nX-Firefox-Spdy: h2\n

\n\n

客户端代码：

\n\n

let inscreenCollection = [someObject, someObject2]\nlet headers = {\n  type: "application/json"\n};\n\nlet blob = new Blob([JSON.stringify(inscreenCollection)], headers);\nnavigator.sendBeacon(URL, blob);\n

\n\n

服务器正在使用 npm 中的 CORS 包：

\n\n

const corsOptions = {\n  optionsSuccessStatus: 200,\n  credentials: true,\n  allowedHeaders: \'Content-Type\',\n  preflightContinue: true,\n}\napp.options(\'/a/\', cors(corsOptions));\napp.post(\'/a/\', cors(corsOptions), (req, res) => {\n   // do stuff\n});\n

\n\n

编辑：错误消息是Credential is not supported if the CORS header \xe2\x80\x98Access-Control-Allow-Origin\xe2\x80\x99 is \xe2\x80\x98*\xe2\x80\x99).

\n\n

有人知道这里可能出现什么问题吗？

\n

Answer 1

在某些情况下，信标确实会发送凭据，因此您需要避免这些情况或避免使用 origin *。

sendBeacon 发起的请求受以下属性的约束：

如果有效负载是 application/x-www-form-urlencoded、multipart/form-data 或 text/plain 之一，则该请求是一个简单请求，不需要额外的 CORS 预检；与脚本化的 form-post 或 XHR/fetch 相同。

否则，如果有效负载是 Blob 并且生成的 Content-Type 不是简单的标头，则会进行 CORS 预检，并且服务器需要首先通过返回适当的 CORS 标头集 ( Access- Control-Allow-凭证、访问控制允许来源、访问控制允许标头）；与 XHR/fetch 相同。