Tartalomjegyzék

< Angular

Angular CORS

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.

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:

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:

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