I have an issue with using sendBeacon for posting data to a server.

It works in chrome (because Chrome seems to skip preflight) but in Firefox the preflight (OPTIONS) is sent with request headers:

Host: example
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.12; rv:53.0) 
Gecko/20100101 Firefox/53.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate, br
Access-Control-Request-Method: POST
Access-Control-Request-Headers: content-type
Origin: 
Connection: keep-alive

And response from server is 200:

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

Client side code:

let inscreenCollection = [someObject, someObject2]
let headers = {
  type: "application/json"
};

let blob = new Blob([JSON.stringify(inscreenCollection)], headers);
navigator.sendBeacon(URL, blob);

Server is using CORS package from npm:

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

Edit: error message is Credential is not supported if the CORS header ‘Access-Control-Allow-Origin’ is ‘*’).

Anyone got any idea what the issue might be here?

I have an issue with using sendBeacon for posting data to a server.

It works in chrome (because Chrome seems to skip preflight) but in Firefox the preflight (OPTIONS) is sent with request headers:

Host: example.
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.12; rv:53.0) 
Gecko/20100101 Firefox/53.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate, br
Access-Control-Request-Method: POST
Access-Control-Request-Headers: content-type
Origin: http://example.
Connection: keep-alive

And response from server is 200:

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

Client side code:

let inscreenCollection = [someObject, someObject2]
let headers = {
  type: "application/json"
};

let blob = new Blob([JSON.stringify(inscreenCollection)], headers);
navigator.sendBeacon(URL, blob);

Server is using CORS package from npm:

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

Edit: error message is Credential is not supported if the CORS header ‘Access-Control-Allow-Origin’ is ‘*’).

Anyone got any idea what the issue might be here?

• javascript
• node.js
• express

• So... what's the error? cors errors are usually very descriptive about what's wrong. – Kevin B Commented May 23, 2017 at 16:13
• 1 Woops. Forgot the error message. Credential is not supported if the CORS header ‘Access-Control-Allow-Origin’ is ‘*’). – Fumler Commented May 23, 2017 at 16:22
• well, there's your problem? you can't use * with credentials. – Kevin B Commented May 23, 2017 at 16:29
• 1 Is there no way to use sendBeacon without it sending credentials? Because I am personally not sending any credentials in my request. – Fumler Commented May 23, 2017 at 16:35
• Yes. But it still does not work if I remove that header. – Fumler Commented May 23, 2017 at 16:41

1 Answer 1

The beacon does under some circumstances send with credentials, so you'll want to either avoid those circumstances or avoid using origin *.

A request initiated by sendBeacon is subject to following properties:

If the payload is one of application/x-www-form-urlencoded, multipart/form-data, or text/plain, then the request is a simple request that does not require an additional CORS-preflight; same as scripted form-post or XHR/fetch.

Otherwise, if the payload is a Blob and the resulting Content-Type is not a simple header, then a CORS preflight is made and the server needs to first allow such requests by returning the appropriate set of CORS headers (Access-Control-Allow-Credentials, Access-Control-Allow-Origin, Access-Control-Allow-Headers); same as XHR/fetch.