< Express

Express - Cors

Szerző: Sallai András

Copyright © 2023, Sallai András

Szerkesztve: 2024, 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

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

const Router = require('express') const router = new Router() router.get('/msg', (req, res) => { res.json({message: 'mehet'}) }) module.exports = router

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

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

<html> <script src="app.js"></script> </html>
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

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:

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)