[[:oktatas:web:back-end_framework: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.


mkdir api
cd api
npm init -y
npm install express
mkdir app


{
  "type": "module",
}

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


import Router from 'express'
const router = Router()

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

export default router

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


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

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 --global resen)) paranccsal: res localhost:8000/msg ===== Készítsünk klienst ===== Készítsünk egy weblapot Node.js projektként:


mkdir web
cd web
npm init -y
mkdir src

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


fetch('http://localhost:8000/msg')
    .then((res) => res.json())
    .then((data) => console.log(data))

Futtassuk weblapunkat egy szerveren, például browser-sync. Telepítés: npm install browser-sync Írjunk egy egyszerű indító scriptet:


{
  "scripts": {
    "start": "browser-sync src"
  }
}

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:


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

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


//...
import cors from 'cors'

app.use(cors())
//...

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:


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

===== Néhány lehetőség ===== Több hely is megadható tömbként:


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

Bárhonnan beengedés:


const corsOptions = {
  origin: '*'
}

Így olyan mintha opciók nélkül futtatnánk. ===== Linkek ===== Lásd még: * https://expressjs.com/en/resources/middleware/cors.html (2025)