Saya sedang membangun aplikasi web pertama saya menggunakan Angular 8.

Tujuan saya adalah menggunakan 'SendGrid' API untuk memproses email.

Dari apa yang saya baca fungsi cloud adalah cara untuk pergi, jadi untuk menggunakannya saya mencoba melakukannya dengan protokol Http dari sisi Angular dan berkomunikasi dengan mesin cloud menggunakan NodeJS.

Saya telah menguji fungsi cloud pada platform google cloud dan berfungsi, saya juga menggunakan tautan saya dan dapat merender halaman baru dengan helloWorld.

Saat menjalankan aplikasi sederhana dalam sudut saya mendapatkan beberapa kesalahan yang berkaitan dengan 'cors' dan XMLHttpRequest 'No Access Control Allow Origin'

Saya telah membaca dokumentasi google untuk fungsi http

Apakah ada contoh yang bisa saya gunakan untuk menyelesaikan ini?

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!');
 }
});`

tested cloud function working postman testing url enter image description here error codes received

0
EvOlaNdLuPiZ 6 Agustus 2019, 22:20

1 menjawab

Jawaban Terbaik

Di sisi sudut, saya terus mendapatkan masalah berkomunikasi dengan url, jadi yang saya coba berbeda adalah menggunakan new HttpHeaders(). setelah itu, saya mengalami masalah lebih lanjut, kesalahan sintaks: kesalahan token tak terduga json, sepertinya masalah penguraian, jadi untuk memperbaikinya saya menggunakan properti responseType dalam deklarasi GET.

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

Di sisi fungsi cloud, saya menggunakan tukang pos untuk memverifikasi bahwa permintaan itu valid, tetapi begitu saya mendapatkan sisi sudut berfungsi maka saya mengujinya.

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

Ini adalah fungsi yang bekerja sekarang. masukkan deskripsi gambar di sinimasukkan deskripsi gambar di sini

EvOlaNdLuPiZ 7 Agustus 2019, 04:36