CORSプリフライトエラーリミックス＆ループバックAPI

Question

私はreact-redux & APIアプリケーションloopbackにクライアントアプリケーションを持っています。私は、クライアントアプリで（loopback-passport componentを使用して）グーグルのOAuthをテストしようとすると私の地元のテストのために

私はポート3000

上のポート8080とサーバアプリ上でクライアントアプリケーションを実行しています、私は以下取得していますエラー。

私はPOSTMANを使用してテストすると、何も問題はありません。ここで

は、ループバックミドルウェアで

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の設定は以下の通りです、これは、単純な問題のように聞こえる

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

クライアント側のコードで、ここでは任意の助けに感謝。

Answer 1

現在のところ、ほとんどのブラウザでは、プリフライトリクエストに対するリダイレクトはサポートされていません。

あなたのケースでこれを試してみてください。

1. URL本当のプリフライトリクエストが終わるだろうかを決定するために、単純な決定するための要求（取得APIのためResponse.urlを使用して、またはXHR.responseURLを作ります〜で）。
2. 最初の手順でResponse.urlまたはXMLHttpRequest.responseURLから取得したURLを使用して別のリクエスト（「実際の」リクエスト）を行います。

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