如何使用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请求？

回答

相关问题