cloud functions using HTTP

Question

I'm building my very first web application using Angular 8.

My goal is to use the 'SendGrid' API to process emails.

From what i've read cloud functions is the way to go, so to use them I was attempting doing it by Http protocol from the Angular side and communicate with the cloud engine using NodeJS.

I've tested the cloud function on the google cloud platform and it works, i've also used my link and was able to render the new page with helloWorld.

When executing the simple application in angular I am getting some errors relating to 'cors' and XMLHttpRequest 'No Access Control Allow Origin'

I've been reading on google documentation for http functions

Is there an example I can use to work this out?

a.component.ts

`
import { HttpClient, HttpHeaders } from '@angular/common/http';
......
constructor(private http: HttpClient){}
......
cloudfx(){
 const option = {
   headers: new HttpHeaders({
    'Content-Type': 'text/plain'
   })
  };
 const url = 'https://name-of-server.cloudfunctions.net/helloWorld'
 const tGET = this.http.get(url, options);
 tGET.subscribe();
 console.log(tGET);
 }
}`

index.js

`
export const helloWorld = functions.https
 .onRequest((request, response) => {
  response.set('Access-Control-Allow-Origin','*');
  response.set('Access-Control-Allow-Headers','*');
 if(request.method == 'OPTIONS'){
  response.set('Access-Control-Allow-Methods','GET');
  response.status(204).send('');
 } else{
  response.send('Hello World!');
 }
});`

You might want to look into using a CORS module, as you've trying to make a request to a host that's different than the one your calling from. This gets easier if you use callable functions instead of http functions, as CORS is handled automatically for you. — Doug Stevenson, Aug 06 '19 at 19:31
@DougStevenson, cheers, i'm a newbie. okay, so i'll aim to implement CORS, but i'd like to ask, is it still required to implement even if you're running on localhost? — EvOlaNdLuPiZ, Aug 06 '19 at 19:32
Yes, you cannot make requests off-host unless you somehow compromise the security measures of your web browser. — Doug Stevenson, Aug 06 '19 at 19:33
relating to CORS, i was reading through some web material that some install a plugin in their browser that bypasses it. i'm going to use my intuition and assume that this is a 'no-no'? — EvOlaNdLuPiZ, Aug 06 '19 at 19:35
also, you mentioned callable functions vs http functions, is this meaning cloud callable functions? and if so, is this what you mean [so-for-callable-vs-http](https://stackoverflow.com/questions/49475667/are-callable-cloud-functions-better-than-http-functions)? thank you. — EvOlaNdLuPiZ, Aug 06 '19 at 19:36
I don't ever recommend bypassing the security of a web browser. Yes, you have the right reference. — Doug Stevenson, Aug 06 '19 at 19:38
i'm able to work with this now, i posted my reference below. please let me know any further insight you have. thank you. — EvOlaNdLuPiZ, Aug 07 '19 at 04:37

score 0 · Accepted Answer · answered Aug 07 '19 at 04:36

on the angular side, i kept getting issues communicating with the url, so what i tried different was to use the new HttpHeaders(). after, i ran into further issues, syntax error: unexpected token error json, it looked like a parsing issue, so to fix it i used responseType property in the GET declaration.

a.component.ts

import { HttpClient, HttpHeaders } from '@angular/common/http';
......
constructor(private http: HttpClient){}
......
cloudfx(){
 const headers = new HttpHeaders();
 headers.append('Content-Type','application/json');
 const url = 'https://name-of-server.cloudfunctions.net/helloWorld'

  this.http.get(url, { headers: headers, responseType: 'text' }).subscribe(
   res => { console.log(res); },
   ero => { console.log(ero); }
  )
}

on the cloud functions side, i used postman to verify the request was valid, but once i got the angular side to work then i tested it.

import * as functions from 'firebase-functions';

const cors = require('cors')({origin: true});

export const helloWorld = functions.https.onRequest((request, response) => {
 cors(request, response, () => {});

 let type = '';
 switch(request.get('content-type')){
  case 'application/json':
   type = 'req.get( application/json )';
  break;
  case 'text/plain':
   type = 'req.get( text/plain )';
  break;
 }
 response.status(200).send( 'yahoo' + type );
});

this is the function working now.

cloud functions using HTTP

1 Answers1