从 Angular 应用程序调用 Rest API [英] Call Rest API From Angular Application

问题描述

我想从我的 Angular 前端调用 Rest API，但我面临着访问控制源

I want to call a Rest API From my Angular Front End but i am facing the permission issue of 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，请告诉我我可以通过这种方式提出请求是否可能，如果可能，请帮助我来解决上述问题

I am making this request from front end that is from angular i am not using any backend such as node or express for this please tell me can i make request this way is it possible or not and if it is possible then please help me to resolve the above issue

推荐答案

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

The cors headers must be enable at Server-side not client side.

 '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"从客户端发送:

and if your server-side need credentials you can send it from client by 'withCredentials' in the httpOptions :

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.

Finally the server-side is responsible to define CORS enable or not.

如果服务器端源不是您的，您有 3 种选择.

If the server-side source is not yours, you have 3 choices.

1. 使用 Origin 发送您的客户端请求:http://168.87.87.213:8080标头参数.但我不能批准这个解决方案.

1. send your client side request with Origin: http://168.87.87.213:8080 at headers parameter. But I cannot approve this solution.

使用相同的 IP 和端口地址在服务器应用部署端部署客户端应用.

Deploy your client app in side of your server app deployment with the same ip and port address.

创建一个新项目作为中介来响应您的特定客户端请求，并将其部署在服务器应用部署端.

Make a new project as a mediator to response your specific client side request and deploy it in side of server app deployment.

这篇关于从 Angular 应用程序调用 Rest API的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！