Kaedah terbaik untuk menyambung ke pelayan menggunakan CLI Angular

Setiap orang yang telah menggunakan Angular CLI tahu bahawa ia adalah alat yang kuat yang dapat membawa pekerjaan pengembangan front-end ke tahap yang sama sekali berbeza. Ia mempunyai semua tugas biasa seperti muat semula langsung, transpiling naskhah, pengurangan, dan banyak lagi. Dan semuanya sudah dikonfigurasikan dan siap digunakan dengan satu arahan mudah:

ng build, ng serve, ng test.

Tetapi ada satu (dan sangat penting) tugas yang perlu dikonfigurasikan setelah aplikasi siap untuk mulai menunjukkan beberapa data dari pelayan…

Ya, tidak kira betapa hebatnya kerangka sudut, dan seberapa cepat dan cepatnya komponennya - pada akhirnya tujuan SPA (aplikasi halaman tunggal) adalah untuk berinteraksi dengan pelayan melalui permintaan HTTP.

Dan inilah halangan pertama yang muncul sebelum setiap pemula CLI Angular: projek Angular dijalankan pada pelayannya sendiri (yang dijalankan secara lalai di // localhost: 4200). Oleh itu, permintaan ke pelayan API adalah lintas domain , dan, seperti yang anda ketahui, keselamatan penyemak imbas web tidak membenarkan pembuatan permintaan lintas domain.

Pendekatan # 1: proksi

Sudah tentu, orang-orang di Angular CLI melihat masalah ini dan bahkan membuat pilihan khas untuk menjalankan projek Angular menggunakan konfigurasi proksi:

ng serve —-proxy-config proxy.conf.json

Apa itu proksi, anda mungkin bertanya? Nah, penyemak imbas tidak membenarkan anda membuat permintaan silang domain, tetapi pelayan melakukannya. Menggunakan pilihan proksi bermaksud anda memberitahu pelayan Angular CLI untuk menangani permintaan yang dihantar dari Angular dan menghantarnya semula dari pelayan pembangunan. Dengan cara ini, orang yang "bercakap" dengan pelayan API adalah pelayan Angular CLI.

Konfigurasi proksi memerlukan proxy.conf.jsonfail untuk ditambahkan ke projek. Ini adalah fail JSON dengan beberapa tetapan asas. Berikut adalah contoh kandungan proxy.conf :

{ "/api/*": { "target": "//localhost:3000", "secure": false, "pathRewrite": {"^/api" : ""} }}

Kod ini bermaksud bahawa semua permintaan yang dimulai dengan api / akan dihantar semula ke // localhost: 3000(yang merupakan alamat pelayan API)

Pendekatan # 2: CORS

Keselamatan penyemak imbas tidak membenarkan anda membuat permintaan merentas domain melainkan Control-Allow-Originheader wujud atas respons pelayan. Setelah anda mengkonfigurasi pelayan API anda untuk '' jawab '' dengan tajuk ini, anda boleh mengambil dan menyiarkan data dari domain yang berbeza.

Teknik ini dipanggil Cross Origin Resource Sharing, atau CORS. Sebilangan besar kerangka pelayan dan pelayan biasa seperti Node.js 'Express, atau Java Spring Boot dapat dikonfigurasi dengan mudah untuk menjadikan CORS tersedia.

Berikut adalah beberapa contoh kod yang menetapkan pelayan Node.js Express menggunakan CORS:

const cors = require('cors'); //<-- required installing 'cors' (npm i cors --save)const express = require('express');const app = express();app.use(cors()); //<-- That`s it, no more code needed!

Perhatikan bahawa ketika menggunakan CORS, sebelum setiap permintaan HTTP dikirim, permintaan akan diikuti setelah permintaan PILIHAN (di URL yang sama) yang memeriksa untuk mengetahui apakah protokol CORS difahami. "Permintaan dua kali" ini boleh mempengaruhi prestasi anda.

Pendekatan Pengeluaran

Ok, projek Sudut anda "bercakap" dengan lancar dengan pelayan, mendapatkan dan menghantar data di persekitaran pemaju. Tetapi masa penyebaran akhirnya tiba, dan anda memerlukan aplikasi Angular yang cantik dan berformat untuk dihoskan di suatu tempat (jauh dari Papa Angular CLI) Jadi sekali lagi anda menghadapi masalah yang sama: bagaimana membuatnya untuk menyambung ke pelayan.

Cuma sekarang ada perbedaan besar: dalam lingkungan produksi (setelah menjalankan ng buildperintah), aplikasi Angular tidak lebih dari sekumpulan file HTML dan JavaScript.

Sebenarnya keputusan mengenai cara menghoskan aplikasi di pelayan produksi adalah keputusan seni bina, dan seni bina jauh di luar ruang lingkup artikel ini. Tetapi ada satu pilihan yang saya cadangkan agar anda pertimbangkan.

Layan Fail Statik Dari Pelayan API

Ya, anda boleh menghoskan projek Angular anda (setelah hanya mempunyai fail HTML dan JavaScript) di pelayan yang sama di mana data (API) dilayani.

Salah satu kelebihan strategi ini ialah sekarang anda tidak menghadapi masalah "lintas domain", kerana klien dan API sebenarnya berada di pelayan yang sama!

Sudah tentu, pendekatan ini memerlukan pelayan API dikonfigurasi dengan betul.

Berikut adalah kod yang memperlihatkan direktori "umum" di mana fail Sudut dapat dihoskan ketika menggunakan pelayan Node Express:

app.use(express.static('public')); //<-- public directory that contains all angular files

Perhatikan bahawa dalam hal ini, cara aplikasi anda mengakses API di lingkungan pengembangan akan berbeda dengan cara API mengaksesnya pada saat produksi. Oleh itu, anda mungkin perlu menggunakan URL HTTP yang berlainan dalam persekitaran yang berbeza (Seperti api / users / 1 di dev dan pengguna / 1 pada produksi). Anda boleh menggunakan pilihan persekitaran Angular CLI untuk mencapainya:

// users.service.ts
const URL = 'users';return this.http.get(`${environment.baseUrl}/${URL}`);...
// example of environment.ts file:export const environment = { production: false, baseUrl: 'api',//<-- 'API/' prefix needed for proxy configuration };
// example of environment.prod.ts file:export const environment = { production: true, baseUrl: '', //<-- no 'API/' prefix needed};

Kesimpulannya

CLI sudut tidak diragukan lagi adalah alat yang sangat kuat dan kuat. Ini menjadikan kehidupan kita sebagai pembangun bahagian depan lebih mudah dalam pelbagai cara. Tetapi ia juga memerlukan anda membuat keputusan seni bina mengenai sambungan ke pelayan API. Oleh itu, anda memerlukan pemahaman yang jelas mengenai pelbagai cara komunikasi pelanggan-pelayan dapat dibuat.

Artikel ini menyenaraikan dua pendekatan menangani masalah ini di persekitaran pemaju dan juga satu cadangan mengenai seni bina pengeluaran.

Cuba bermain dengan pelbagai kompilasi dan lihat mana yang lebih sesuai untuk anda dan pasukan anda.

Selamat bergembira dan beritahu saya bagaimana keadaannya!