Redirect to authentication for CORS request using XMLHttpRequest


I went through the installation of Node.js and Express Tutorial: Authentication Using Passport which runs on localhost:3000 (or with a custom local domain

Now, I added a new endpoint that I want to call from localhost:3002 (it requires CORS)

This is my endpoint on localhost:3000"/items", secured, (req, res, next) => {
  try {
  } catch (err) {

This is my call from localhost:3002 (copy/paste from somewhere else).

console.log( 'loading main.js' );
const btn = document.getElementById('add-to-list')
const url = ''

function sendData( data ) {
  console.log( 'Sending data' );

  const XHR = new XMLHttpRequest();

  let urlEncodedData = "",
      urlEncodedDataPairs = [],

  // Turn the data object into an array of URL-encoded key/value pairs.
  for( name in data ) {
    urlEncodedDataPairs.push( encodeURIComponent( name ) + '=' + encodeURIComponent( data[name] ) );

  // Combine the pairs into a single string and replace all %-encoded spaces to
  // the '+' character; matches the behavior of browser form submissions.
  urlEncodedData = urlEncodedDataPairs.join( '&' ).replace( /%20/g, '+' );

  // Define what happens on successful data submission
  XHR.addEventListener( 'load', function(event) {
    console.log( 'Response is: ' + XHR.response);
  } );

  // Define what happens in case of error
  XHR.addEventListener( 'error', function(event) {
    console.error( 'Oops! Something went wrong.' );
  } );

  // Set up our request 'POST', url );

  // Add the required HTTP header for form data POST requests
  XHR.setRequestHeader( 'Content-Type', 'application/x-www-form-urlencoded' );

  // Finally, send our data.
  XHR.send( urlEncodedData );

btn.addEventListener( 'click', function() {
  sendData( {test:'ok'} );
} )

I set up cors and my POST call works as long as I don’t add the secured. If I do, the call fails because localhost:3000 doesnt seem to pick up any credentials and I get the following error:

Access to XMLHttpRequest at '' (redirected from '') from origin '' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
main.js:31 Oops! Something went wrong.
(anonymous) @ main.js:31
error (async)
sendData @ main.js:30
(anonymous) @ main.js:45
main.js:41 GET net::ERR_FAILED

I woudn’t expect to see any redirect but a reuse of existing credentials from the session or cookies. I understand why req.user is empty but then what am I supposed to use instead to avoid the redirect to the login?

This is how secured looks like (which understandably redirect to login because req.user is undefined)

const secured = (req, res, next) => {
  if (req.user) {
    return next();
  req.session.returnTo = req.originalUrl;

Any e2e example that I could use or an explanation of what I am doing wrong? I have seen many posts with similar question but I don’t seem to find anything that solves my problem


So I found the solution I think (I should post more often)

On the client side (:3002), add

 XHR.withCredentials = true;

On the server side (:3000), add a credentials key

  origin: '',
  credentials: true
1 Like

Perfect! Thanks for sharing it with the rest of community!

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.