CORS preflight error redux & loopback API

Question

I have a client application in react-redux and a loopback API application.

For my local testing, I am running a client application on port 8080 and a server application on port 3000.

When I try to test Google OAuth (using loopback-passport component ) with a client application, I get the following error.

When I test it with POSTMAN, there is no problem.

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

The CORS settings in the loopback middleware are given below.

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

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

Answer 1

Most browsers do not currently support the following redirects for precheck requests.

try this in your case:

• Make a simple query to determine (using Response.url for the Fetch API or XHR.responseURL to determine which URL the actual request will be executed before the request).
• Make another request (a “real” request) using the URL obtained using Response.url or XMLHttpRequest.responseURL in the first step.

Resource Sharing (CORS) - Advance Requests and Redirects