[[oktatas:web:angular|< Angular]]

====== Angular CORS ======

  * **Szerző:** Sallai András
  * Copyright (c) 2025, Sallai András
  * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|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:

<code javascript>
import cors from 'cors'
//...
app.use(cors())
</code>

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

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


===== Megoldás fejlesztési időben Angularban =====

<note important>
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!
</note>

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:

<code javascript src/proxy.conf.json>
{
  "/api": {
    "target": "http://localhost:8000",
    "changeOrigin": true,
    "secure": false
  }
}
</code>

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.

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

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

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

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:

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

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)