szit

Ez az oldal csak olvasható. Megtekintheted a forrását, de nem változtathatod meg. Ha úgy gondolod, hogy ez helytelen, kérdezd az Adminisztrátorokat!
[[:oktatas:web:express|< Express]]

====== Express - Cors ES ======

  * **Szerző:** Sallai András
  * Copyright (c) 2025, Sallai András
  * Szerkesztve: 2025
  * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC Attribution-Share Alike 4.0 International]]
  * Web: https://szit.hu

===== Szerver =====

Készítsünk egy egyszerű express szervert. Legyen a projektkönyvtár neve api. 
Tegyük Node.js projektté, majd telepítsük az express csomagot. A szerver 
állományait az **app** nevű könyvtárban fogjuk elhelyezni.

<code>
mkdir api
cd api
npm init -y
npm install express
mkdir app
</code>


<code javascript>
{
  "type": "module",
}
</code>


Az útválasztás a routes.js fájlban:

<code javascript app/rotues.js>
import Router from 'express'
const router = Router()

router.get('/msg', (req, res) => {
  res.json({ message: 'mehet'})
})

export default router
</code>

A szerver belépési pontja, az index.js fájl tartalma:

<code javascript app/index.js>
import express from 'express'
import router from './routes.js'
const app = express()

app.use(express.json())
app.use(router)

const PORT = process.env.PORT || 8000

app.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`)
})
</code>

Indítsuk el, például így: 
  node app


Ha Insomnia, Postman, HTTPie, Resen (res) vagy curl segítségével nézem meg az API-t, nincs probléma.

Teszteljük valamelyik HTTP klienssel. Például res ((Telepítés: npm install <nowiki>--global</nowiki> resen)) paranccsal:
  res localhost:8000/msg


===== Készítsünk klienst =====

Készítsünk egy weblapot Node.js projektként:
<code>
mkdir web
cd web
npm init -y
mkdir src
</code>

Legyen egy egyszerű weblap, ami futtat egy fetch() függvényt, az eredményt pedig
a konzolon szeretnénk látni.

<code javascript src/index.html>
<html>
<script src="app.js"></script>
</html>
</code>

<code javascript src/app.js>
fetch('http://localhost:8000/msg')
    .then((res) => res.json())
    .then((data) => console.log(data))
</code>


Futtassuk weblapunkat egy szerveren, például browser-sync. Telepítés:
  npm install browser-sync

Írjunk egy egyszerű indító scriptet:
<code javascript package.json>
{
  "scripts": {
    "start": "browser-sync src"
  }
}
</code>


Ha el van indítva az API szerver indítsuk el a webes felület szerverét is.

  npm start

A webes felület a böngészőben megnézve, nyissuk meg a fejlesztői felület
konzol részét.

Ehhez hasonló  hibát kapunk:

<code>
'http://localhost:3000' has been blocked 
by CORS policy: No 'Access-Control-Allow-Origin' 
header is present on the requested resource.
</code>

A konzolon Cors beállítási problémákat látunk.

===== A cors beállítása =====

Az API szerveren telepítsük a cors csomagot:

  npm install cors

<code javascript app/index.js>
//...
import cors from 'cors'

app.use(cors())
//...
</code>

Ezzel a beállítással már működik, de így mindenhonnan beenged a klienseket.

Szabályozhatjuk honnan engedélyezzük. Egy teljesebb kóddal:

<code javascript app/index.js>
import express from 'express'
import router from './routes.js'
const app = express()
import cors from 'cors'

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

app.use(express.json())
app.use(router)

const PORT = process.env.PORT || 8000

app.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`)
})
</code>

===== Néhány lehetőség =====

Több hely is megadható tömbként:

<code javascript>
const corsOptions = {
  origin: [
    'http://localhost:3000', 
    'http://192.168.10.20:3000'
  ],
}
</code>

Bárhonnan beengedés:

<code javascript>
const corsOptions = {
  origin: '*'
}
</code>

Így olyan mintha opciók nélkül futtatnánk.


===== Linkek =====

Lásd még:
  * https://expressjs.com/en/resources/middleware/cors.html (2025)