Ez a dokumentum egy előző változata!

Tartalomjegyzék

Express - Cors ES

Express - Cors ES

Szerző: Sallai András
Copyright © 2025, Sallai András
Szerkesztve: 2025
Licenc: 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:

app/rotues.js

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:

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

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 ¹⁾ 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.

src/index.html

<html>
<script src="app.js"></script>
</html>

src/app.js

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:

package.json

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

app/index.js

const cors = require('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:

app/index.js

const express = require('express')
const router = require('./routes')
const app = express()
 
const cors = require('cors')
var corsOptions = {
     origin: 'http://localhost:8000'
}
app.use(cors(corsOptions))
 
app.use(express.json())
app.use('/',router)
 
PORT = process.env.PORT || 8000
app.listen(PORT, () => {
    console.log(`Listening: ${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)

¹⁾

Telepítés: npm install --global resen