Angular fetching data (http - messagebird)

Question

I am trying to fetch the conversations from my messagebird api, I tried in postman and all is good but when I'm trying to get from my angular project, that gives me an error, this is my code:

export class AppComponent {
  constructor(private service: WaServiceService) { }

  fetchCharacters() {
    this.service.getConversations().subscribe(
      (data) => {
        console.log(data); 
      },
      (error) => {
        console.error(error);
      }
    );
  }
}

my service:

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})

export class WaServiceService {
  private apiUrl = 'https://conversations.messagebird.com/v1/conversations?status=all&offset=0&limit=20';
  private apiKey = 'AccessKey abc123';

  constructor(private http: HttpClient) { }

  getConversations(): Observable<any> {
    const url = `${this.apiUrl}`;
    const headers = new HttpHeaders().set('Authorization', `${this.apiKey}`);

    return this.http.get(url, { headers });
  }
}

What am I doing wrong?

Answer 1

Apparently it's a CORS issue, access from different origin is not allowed (this is why it's working with Postman, and not with Angular, see: XMLHttpRequest cannot load XXX No 'Access-Control-Allow-Origin' header). Also, all Angular code is public, so you should never include your API key on frontend.

You need to make messagebird request from the server (it depends on your server, check SDK examples, instead from the frontend.

So, from Angular, you make request to your server and send some parameters and data to make a request, and then server uses that data and parameters and then makes a request to messagebird, and returns data to Angular service.

Angular service:

this.http.get('YOUR SERVER URL', someDataForRequest);

your server (Node.js example inspired pseudocode):

const apiKey = 'AccessKey abc123';

const messagebird = require('messagebird').initClient('apiKey');

makeRequest(someDataForRequest) {

    // list conversations
    // In this case 20 is limit and 0 is offset
    messagebird.conversations.list(20, 0, function(err, response) {
        if (err) {
            return console.log(err);
        }
        console.log(response);
        
        // return data to frontend
        return response;

    });

}