• Szerző: Sallai András
• Copyright © 2025, Sallai András
• Licenc: CC Attribution-Share Alike 4.0 International
• Web: https://szit.hu

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.

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.

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

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:

src/proxy.conf.json

{
  "/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.

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.

• 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)