CORS preflight error redux & loopback API

Question

I have a client application on react-redux & API app on loopback.

For my local testing I am running client app on port 8080 and server app on port 3000.

When I try to test out the Google OAuth (using loopback-passport component) with the client app, I am getting the below error.

When I test it using POSTMAN, there are no issues.

Here is the client side code,

require('babel-polyfill'); 
import { CALL_API } from 'redux-api-middleware'; 
import C from '../constants';
const API_ROOT = 'http://localhost:3000';
function googleLogin() {   return async(dispatch) => {
    const actionResp = await dispatch({
      [CALL_API]: {
        endpoint: API_ROOT + '/auth/google',
        headers: {
          'Access-Control-Allow-Credentials': 'false',
          'Access-Control-Allow-Methods': 'GET',
          'Access-Control-Allow-Origin': API_ROOT
        },
        method: 'GET',
        types: ['GET', 'GET_SUCCESS', 'GET_FAILED']
      }
    });

    if (actionResp.error) {
      console.log(actionResp);
      throw new Error('Some error in communication', actionResp);
    } else {
      console.log(actionResp);
    }   
 }; 
}

CORS settings in loopback middleware is as below,

"cors": {
   "params": {
      "origin": true,
      "credentials": false,
      "maxAge": 86400
    }
  }

This sounds like a simple problem, appreciate any help here.

Tenatenable

Can you fork github.com/strongloop/loopback-sandbox and create a sample project. I have configured our loopback project to work with CORS. I 'll try to help. – Laynelayney

Answer 1

Most browsers currently don’t support following redirects for preflighted requests.

try this in your case:

1. Make a simple request to determine (using Response.url for the Fetch API, or XHR.responseURL to determine what URL the real preflighted request would end up at).
2. Make another request (the “real” request) using the URL you obtained from Response.url or XMLHttpRequest.responseURL in the first step.

Cross-Origin Resource Sharing (CORS) - Preflighted requests and redirects

Jinx