CORS - How do 'preflight' an httprequest? CORS - How do 'preflight' an httprequest? jquery jquery

CORS - How do 'preflight' an httprequest?


During the preflight request, you should see the following two headers: Access-Control-Request-Method and Access-Control-Request-Headers. These request headers are asking the server for permissions to make the actual request. Your preflight response needs to acknowledge these headers in order for the actual request to work.

For example, suppose the browser makes a request with the following headers:

Origin: http://yourdomain.comAccess-Control-Request-Method: POSTAccess-Control-Request-Headers: X-Custom-Header

Your server should then respond with the following headers:

Access-Control-Allow-Origin: http://yourdomain.comAccess-Control-Allow-Methods: GET, POSTAccess-Control-Allow-Headers: X-Custom-Header

Pay special attention to the Access-Control-Allow-Headers response header. The value of this header should be the same headers in the Access-Control-Request-Headers request header, and it can not be '*'.

Once you send this response to the preflight request, the browser will make the actual request. You can learn more about CORS here: http://www.html5rocks.com/en/tutorials/cors/


Although this thread dates back to 2014, the issue can still be current to many of us. Here is how I dealt with it in a jQuery 1.12 /PHP 5.6 context:

  • jQuery sent its XHR request using only limited headers; only 'Origin' was sent.
  • No preflight request was needed.
  • The server only had to detect such a request, and add the "Access-Control-Allow-Origin: " . $_SERVER['HTTP_ORIGIN'] header, after detecting that this was a cross-origin XHR.

PHP Code sample:

if (!empty($_SERVER['HTTP_ORIGIN'])) {    // Uh oh, this XHR comes from outer space...    // Use this opportunity to filter out referers that shouldn't be allowed to see this request    if (!preg_match('@\.partner\.domain\.net$@'))        die("End of the road if you're not my business partner.");    // otherwise oblige    header("Access-Control-Allow-Origin: " . $_SERVER['HTTP_ORIGIN']);}else {    // local request, no need to send a specific header for CORS}

In particular, don't add an exit; as no preflight is needed.


Solve the CORS issue by writing your custom middleware in Node.js with these simple steps.

don't need to set anything from the client, just a little change on the Node.js server will fix the problem.

create a middleware:

// in middleware/corsResolver.jsfunction corsResolver(req, res, next) {    // Website you wish to allow to connect    // running front-end application on port 3000    res.setHeader('Access-Control-Allow-Origin', 'http://localhost:3000');     // Request methods you wish to allow    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');    // Request headers you wish to allow    res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type,Authorization');    // Set to true if you need the website to include cookies in the requests sent    // to the API (e.g. in case you use sessions)    res.setHeader('Access-Control-Allow-Credentials', true);    // Pass to next layer of middleware    next();}module.exports = corsResolver;

now edit your server.js (index.js or any main file that starts your node server) and add this middleware:

// server.js or indes.js const corsResolver = require('path/to/resolver-middleware')app.use(corsResolver)  // -----------> applied middleware here// other stuff