Tuesday, 23 May 2017

Sending application/json data with navigation.sendBeacon, preflight succeedes but not post

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.com
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.com
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
});

Anyone got any idea what the issue might be here?



via Fumler

No comments:

Post a Comment