如何使用Firebase和Angular發送HTTP GET請求？

我的應用程序使用IBM Watson語音到文本，它需要訪問令牌。在命令行中我能得到訪問令牌的捲曲度：如何使用Firebase和Angular發送HTTP GET請求？

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"

當我做採用了棱角分明的$http服務的HTTP請求，我得到一個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做Node，但我使用Firebase作爲服務器。

有關使用CORS進行HTTP請求的Firebase具有documentation。該文件說寫這個：

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

    }); 
});

首先，這是行不通的。錯誤消息是functions is not defined。顯然functions不在Firebase庫中？我把火力地堡從index.html：

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

我的控制器依賴注入了$firebaseArray，$firebaseAuth和$firebaseStorage。我需要注入一個依賴關係$firebaseHttp或類似的東西嗎？其次，我該如何指定方法（'GET'），URL和數據（我的賬戶和密碼）？

來源

2017-08-26 Thomas David Kehoe

簡而言之，令牌生成器端點不支持CORS，也就是說，它不支持接收來自運行在瀏覽器中的前端JavaScript代碼的交叉源請求，所以唯一的方法就是能夠調用它是：（A）而是從後端代碼發出請求;或（B）使用https://github.com/Rob--W/cors-anywhere/中的代碼設置CORS代理，然後讓您的前端代碼通過該CORS代理髮出請求 – sideshowbarker

由於該API需要身份驗證，但顯然需要將這些憑證作爲GET請求的一部分發送，然後向請求添加一個'Authorization：Basic bXk ...'請求標頭，其中'bXk ...'被替換爲您的Base64編碼實際帳戶名稱和密碼在*帳戶：密碼*形式 - 但如果你嘗試，你會發現它也失敗了，再次與401。這是因爲添加'Authorization'頭到請求觸發瀏覽器首先自動做一個CORS在嘗試代碼中的GET請求之前預檢「OPTIONS」請求並且預檢失敗。 – sideshowbarker

CORS預檢失敗的原因是，該令牌生成器端點顯然需要對「OPTIONS」請求進行身份驗證（但不應該），但瀏覽器不會向該預檢「OPTIONS」請求添加「Authorization」頭，因爲預檢的全部目的是詢問服務器是否可以接收包含該標頭的跨源請求。 – sideshowbarker

答案是使用火力地堡雲功能，使運行節點的功能從服務器。然後使用節點模塊request發送來自節點的HTTP請求。

來源

2017-08-28 20:36:42

如果你想發送角度憑證，只需設置withCredentials=true。我也在使用CORS和Angular v4，爲你的HTTP頭錯誤，你是對的。請在服務器端添加標頭Access-Control-Allow-Origin，檢查您的api中是否有設置以允許某些域名，網址，頁面，因爲google api具有此功能，所以請檢查您獲取令牌的位置，應該有一些設置。

這裏是例子，我怎麼使用打字稿與調用API CORS，：

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

希望它能幫助:)

來源

2017-08-26 20:07:47 SloCompTech

如何使用Firebase和Angular發送HTTP GET請求？

回答

相關問題