0

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

Akj
  • 7,038
  • 3
  • 28
  • 40
Aditya
  • 11
  • 5
  • 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 Aug 18 '18 at 08:47
  • 1
    "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 Aug 18 '18 at 09:01
  • i am passing headers from client side but it always gives me 401 unauthorize error – Aditya Aug 20 '18 at 05:43

1 Answers1

4

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.

Mehdi Tahmasebi
  • 1,074
  • 6
  • 10