从 Angular 应用程序调用 Rest API答案

【问题标题】：Call Rest API From Angular Application从 Angular 应用程序调用 Rest API
【发布时间】：2018-08-19 01:13:49
【问题描述】：

我想从我的 Angular 前端调用一个 Rest API，但我面临 Access control origin 的权限问题

这是我的前端代码

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { HttpClient, HttpHeaders } from '@angular/common/http';
var httpOptions = {
  headers: new HttpHeaders({
    'Content-Type': 'application/vnd.onem2m-res+json;ty=4',
    'Accept': 'application/json',
    'X-M2M-RI': '9900001',
    'X-M2M-Origin': 'C7AACE9CB-258b9773',
    'Authorization': 'Basic QzdBQUNFOUNCLTI1OGI5NzczOlRlc3RAMTIz',
    'Access-Control-Allow-Origin': '*',
    'Access-Control-Allow-Methods': 'GET,PUT,POST,DELETE,OPTIONS',
    'Access-Control-Allow-Headers': 'Content-Type, Authorization, Content- 
     Length, X-Requested - With'
     }
  )
};

@Injectable()
export class ApiService {
  constructor(private http: HttpClient) { }
  fetch_latest_data(): Observable<any> {
    return this.http.get("http://168.87.87.213:8080/davc/m2m/HPE_IoT/ 0000acfffe6f290b/default/latest", httpOptions);

  }
}

我从 Angular 的前端发出这个请求，我没有使用任何后端，例如 node 或 express，请告诉我我可以用这种方式发出请求是否可行，如果可以，请帮忙我来解决上述问题

【问题讨论】：

从 Angular 发送 CORS 标头将无效。您是否可以修改 http://168.87.87.213:8080/ 以返回 CORS 标头？
“我没有为此使用任何后端，例如 node 或 express”：你能澄清一下吗？如果不去后端，其余的调用会去哪里？
我正在从客户端传递标头，但它总是给我 401 unauthorize 错误

标签： angular angular-services

【解决方案1】：

cors 标头必须在服务器端而不是客户端启用。

 'Access-Control-Allow-Origin': '*',
 'Access-Control-Allow-Methods':'GET,PUT,POST,DELETE,OPTIONS',
 'Access-Control-Allow-Headers':'Content-Type, Authorization, Content-Length, X-Requested-With'

如果您的服务器端需要凭据，您可以通过 httpOptions 中的“withCredentials”从客户端发送它：

var httpOptions = {
  headers: new HttpHeaders({
    'Content-Type': 'application/vnd.onem2m-res+json;ty=4',
    'Accept': 'application/json',
    'X-M2M-RI': '9900001',
    'X-M2M-Origin': 'C7AACE9CB-258b9773',
    'Authorization': 'Basic QzdBQUNFOUNCLTI1OGI5NzczOlRlc3RAMTIz',
 }),
 withCredentials: true;
};

最后服务器端负责定义CORS是否启用。

如果服务器端源不是你的，你有 3 个选择。

在 headers 参数处使用 Origin: http://168.87.87.213:8080 发送您的客户端请求。但我不能批准这个解决方案。
使用相同的 ip 和端口地址将客户端应用部署在服务器应用部署的一侧。
创建一个新项目作为中介，以响应您的特定客户端请求并将其部署在服务器应用程序部署中。

【讨论】：