从Angular应用程序调用Rest API

Question

I want to call a Rest API From my Angular Front End but i am facing the permission issue of Access control origin

This is my code of front end

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

  }
}

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

Answer 1

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'

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

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

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

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

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

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