My current setup involves a client application running on React-Redux and an API app on Loopback.
During local testing, I have the client app on port 8080 and the server app on port 3000.
While attempting to test Google OAuth (using the loopback-passport component) with the client app, I encountered the following error:
https://i.stack.imgur.com/QTO1C.png
However, when testing it using POSTMAN, everything works perfectly fine.
The client-side code is shown below:
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 as follows:
"cors": {
"params": {
"origin": true,
"credentials": false,
"maxAge": 86400
}
}
This issue seems straightforward, but any assistance would be appreciated.