Call Rest API From Angular Application

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

Sending the CORS headers from Angular will have no effect. Are you able to modify http://168.87.87.213:8080/ to return the CORS headers? — user184994
– user184994, Commented Aug 18, 2018 at 8:47
"i am not using any backend such as node or express for this": can you clarify this? Where is the rest call going to if not to a backend? — Henry
– Henry, Commented Aug 18, 2018 at 9:01
i am passing headers from client side but it always gives me 401 unauthorize error — Aditya
– Aditya, Commented Aug 20, 2018 at 5:43

Mehdi Tahmasebi · Accepted Answer · 2018-08-18 09:07:11Z

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.

send your client side request with Origin: http://168.87.87.213:8080 at headers parameter. But I cannot approve this solution.
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.

Collectives™ on Stack Overflow

Call Rest API From Angular Application

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related