Question

我想从Angular前端调用Rest API，但是我遇到 访问控制源

的权限问题

这是我的前端代码

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

  }
}

我正在从前端发出此请求，该请求是从角度发出的，我没有使用任何后端（例如节点或表述），请告诉我是否可以这种方式提出请求，如果可以，那么请帮助我要解决以上问题

Answer 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和端口地址在服务器应用程序部署中部署客户端应用程序。
创建一个新项目作为中介，以响应您的特定客户端请求并将其部署在服务器应用程序部署中。

从Angular应用程序调用Rest API

1 个答案: