FirebaseとAngularを使用してHTTP GETリクエストを送信するにはどうすればよいですか？

Question

私のアプリでは、アクセストークンが必要なIBM Watson Speech-to-Textを使用しています。コマンドラインから私はカールとアクセストークンを取得することができます：私は角の$httpサービスを使用してHTTPリクエストを行うと

curl -X GET --user my-user-account:password \ 
--output token \ 
"https://stream.watsonplatform.net/authorization/api/v1/token?url=https://stream.watsonplatform.net/speech-to-text/api" 

私はCORSエラーを取得：

var data = { 
    user: 'my-user-account:password', 
    output: 'token' 
}; 

$http({ 
    method: 'GET', 
    url: 'https://stream.watsonplatform.net/authorization/api/v1/token?url=https://stream.watsonplatform.net/speech-to-text/api', 
    data: data, 
}).then(function successCallback(response) { 
    console.log("HTTP GET successful"); 
}, function errorCallback(response) { 
    console.log("HTTP GET failed"); 
}); 

エラーメッセージは言う：

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin ' http://127.0.0.1:8080 ' is therefore not allowed access. The response had HTTP status code 401.

私が理解しているように、AngularからCORSを実行することはできません。 CORSはサーバーから実行する必要があります。ノードでCORSを実行する方法は分かっていますが、Firebaseをサーバーとして使用しています。

CORSでHTTPリクエストを作成することについてFirebaseはdocumentationを持っています。ドキュメントには次のように書かれています。

$scope.getIBMToken = functions.https.onRequest((req, res) => { 
    cors(req, res,() => { 

    }); 
}); 

まず、これは機能しません。エラーメッセージはfunctions is not definedです。明らかにfunctionsはFirebaseライブラリにありませんか？私はindex.htmlからFirebaseを呼び出す：

<script src="https://www.gstatic.com/firebasejs/4.3.0/firebase.js"></script> 

私のコントローラは$firebaseArray、$firebaseAuth、そして$firebaseStorageの依存関係を注入します。 $firebaseHttpなどの依存関係を注入する必要がありますか？

第2に、方法（ 'GET'）、URL、およびデータ（アカウントとパスワード）を指定するにはどうすればよいですか？

Answer 1

答えがFirebaseのためのクラウド機能を使用することで、ノードの機能を実行可能にしますサーバーから。次にノードモジュールrequestを使用して、ノードからHTTP要求を送信します。

Answer 2

角度でクレデンシャルを送信する場合は、ちょうどwithCredentials=trueと設定します。私はあなたのHTTPヘッダーエラーのためにAngular v4でCORSも使用しています。ヘッダーAccess-Control-Allow-Originをサーバー側に追加する必要があります.APIに特定のドメイン、URL、ページを許可する設定があるかどうかを確認する必要があります.Google APIにはこの機能があります。ここで

は、私はtypescriptですを使用して、CORSでAPIを呼び出していますどのように、一例である：

broadcastPresense(clientId: string) { 
    const headers = new Headers({'Content-Type':'application/json','withCredentials':'true'}); 
    return this.http.post('http://localhost/api.php', 
    { 
     'jsonrpc': '2.0', 
     'method': 'somemethod', 
     'params': {'client_id': clientId}, 
     'id': CommonClass.generateRandomString(16) 
    },{headers: headers, withCredentials:true}).map(
     (res: Response) => { 
      console.log(res); 
      const data = res.json(); 
      console.log(data); 
      if (data.error == null) { 
       return data.result; 
      } else if (data.error != null) { 
       throw data.error; 
      } 
      throw data.error; 
     } 
    ).catch(
     (error) => { 
     this.router.navigate(['/error',3],{queryParams: {desc:'Server error'}}); 
     return Observable.throw(error); 
     } 
    ); 
} 

はそれが役に立てば幸い:)