在 Angular 中使用需要授权的 API答案

【问题标题】：Using An API that requires authorization In Angular在 Angular 中使用需要授权的 API
【发布时间】：2018-10-27 15:16:55
【问题描述】：

我正在使用这个需要授权的 api。我有令牌和客户端 ID，所以我可以轻松地在 curl 上发出请求，但我正试图让它在我的 Angular 应用程序中工作。 curl命令是：

curl -H "Authorization: $ACCESS_TOKEN" \
  "https://chitchats.com/api/v1/clients/$CLIENT_ID/shipments"

我尝试在我的 Angular 应用程序上这样做：

import { Component } from '@angular/core';
import { TestService } from './test.service';
import { HttpClient,HttpHeaders,HttpParams } from '@angular/common/http';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  response:any;
  constructor(private http:HttpClient){
}
ngOnInit(){
}
searchProd(){
  let headers=new HttpHeaders().set('Authorization','$ACESS_TOKEN')
  this.http.get('https://chitchats.com/api/v1/clients/$CLIENT_ID/shipments', {headers})
  .subscribe((response)=>{
    this.response=response;
    console.log(this.response);
  })
}


}

但是，在浏览器上运行应用程序时出现 403 错误。我在使用其他不需要授权的 API 时没有遇到任何问题。

【问题讨论】：

嗨，Travis，欢迎来到 Stack Overflow。你看到了什么响应头信息？ GET、OPTIONS等
Access-Control-Allow-Headers: * Access-Control-Allow-Methods: POST, GET, OPTIONS, PUT, DELETE Access-Control-Allow-Origin: * Allow: POST, GET, OPTIONS , 放置, 删除
可能是几件事：1. 无法访问资源 2. 未配置 CORS（使用 Chrome 插件禁用 CORS 客户端以检查是否是这种情况：chrome.google.com/webstore/detail/allow-control-allow-origi/…）

标签： angular typescript api http curl

【解决方案1】：

你可以试试这个方法吗...

let headers: HttpHeaders = new HttpHeaders();
headers = headers.append('Authorization', '$ACESS_TOKEN');

如果仍然无法正常工作，则允许来自后端的 cors。

如果您使用 node 作为后端，则将此代码放入 app.js 文件中。

// Allow cross origin permission 
app.use(function (req, res, next) {
   res.header("Access-Control-Allow-Origin", "*");
   res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
   next();
});

【讨论】：