< Angular

Angular CORS

Szerző: Sallai András

Copyright © 2025, Sallai András

Licenc: CC Attribution-Share Alike 4.0 International

Web: https://szit.hu

A CORS

A CORS beállítások a megvédenek minket a Cross-Site Request Forgery (CSRF) támadások ellen és segítheti a Cross-Site Scripting (XSS) támadások elleni védekezést is.

A probléma fejlesztéskor

Fejlesztési időben általában külön szerveren futtatjuk a Backend-t és a Frontend-t.

Backend például: localhost:8000

Frontend például: localhost:4200

A CORS ezt nem engedi meg.

A probléma a böngésző biztonsági politikája miatt van. Alapértelmezetten a böngésző nem engedi meg az ilyen keresztkéréseket.

Megoldás szerveroldalon

A szerver oldalon, vagyis a Backend programban engedélyezhetjük a megfelelő CORS fejléc előállítását, ami megengedi a 4200 portól érkező kéréséket. A böngésző ha azt látja a szervertől kapott válasz fejlécében, hogy a engedélyezett például a localhost:4200 címre kérés, akkor el fogja fogadni. De ezt a Backend-nek kell megmondania.

Hogyan kell ezt beállítani, Backend-től függ.

ExpressJS Backend szerver például alapértelmezetten nem enged semmilyen keresztkérést.

De a cors csomag használatával már mindent megenged:

import cors from 'cors' //... app.use(cors())

Ha biztonsági okokból szabályozni szeretnénk, hogy honnan állítható, akkor paraméterezzük a cors() függvényt.

const corsOptions = { origin: 'http://localhost:4200', } app.use(cors(corsOptions))

Megoldás fejlesztési időben Angularban

Ez a megoldás csak fejlesztési időben működik. Ha a CORS probléma a kész terméknél is fennáll, azt szerveren oldalon kell beállítani!

Ha nem áll módunkban Backend oldalon beállítani a CORS-t, akkor fejlesztési időben Angularban létrehozhatunk egy proxy működést.

Készítsünk az src könyvtárban egy proxy.conf.json nevű fájlt:

{ "/api": { "target": "http://localhost:8000", "changeOrigin": true, "secure": false } }

A „/api” rész azért került a beállításba, mert feltételezzük, hogy a végpontok ez alatt érhetők el. Egy employees végpont például így:

/api/employees

A target értéke a Backend elérése.

Állítsuk be az Angular konfigurációban ennek a fájlnak a használatát. Szerkesszük az angular.json fájlt.

"architect": { "serve": { "builder": "@angular-devkit/build-angular:dev-server", "options": { "proxyConfig": "src/proxy.conf.json" }, ... }, ... }

Indítsuk újra az Angular fejlesztői szervert.

Az Angular fejlesztői szervert minden esetben újra kell indítani, ha változtattunk a angular.json tartalmán.

A szolgáltatásainkban ezek után a localhost:8000 helyett a localhost:4200-t írjuk.

Például egy szolgáltatásban a getEmployees() metódus a dolgozók adatait akarja lekérni az URL így néz ki:

getEmployees() { let url = 'http://localhost:4200/api/employees'; return this.http.get(url); }

Vegyük észre, hogy REST API kérést, most az Angular szerver 4200-s portjára küldjük.

A kérést először az Angular fejlesztői szervere dolgozza fel, ami a böngészőnek meg fog felelni. A kérést viszont tovább dobja a Backend szerverre.

Lásd még

https://v17.angular.io/guide/build#proxying-to-a-backend-server (Angular 17 esetén: 2025)

https://angular.dev/tools/cli/serve (Angular később változat esetén: 2025)