CORS preflight error redux & loopback API

Question

Mam aplikację kliencką na react-redux & aplikacji API na loopback.

Dla mojego lokalnego testowania Używam aplikację kliencką na porcie 8080 i aplikacji serwera na porcie 3000.

Kiedy próbuję przetestować Google OAuth (używając loopback-passport component) z aplikacji klienckiej, jestem coraz niżej błąd.

Kiedy go przetestować za pomocą listonosz, nie ma problemów.

Oto klient kod z boku,

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 ustawienia w pętli zwrotnej middleware jest jak poniżej,

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

To brzmi jak prostego problemu, doceniam tutaj żadnej pomocy.

Answer 1

Większość przeglądarek obecnie nie obsługuje następujących przekierowań dla żądań z preflightem.

spróbować to w Twoim przypadku:

1. zrobić prosty wniosek, aby określić (za pomocą Response.url dla API Fetch lub XHR.responseURL celu określenia, jakie URL prawdziwy preflighted prośba skończy up at).
2. Wykonaj kolejne żądanie ("rzeczywiste" żądanie), używając adresu URL uzyskanego z adresu Response.url lub XMLHttpRequest.responseURL w pierwszym kroku.

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