Különbségek

A kiválasztott változat és az aktuális verzió közötti különbségek a következők.

--- oktatas:web:back-end_framework:express:cors [2025/07/18 11:11] – [Szerver] admin
+++ oktatas:web:back-end_framework:express:cors [2025/08/01 10:14] (aktuális) – eltávolítva admin
@@ Sor 1: / Sor 1: @@
-[[:oktatas:web:back-end_framework:express|< Express]]
-====== Express - Cors ======
-  * **Szerző:** Sallai András
-  * Copyright (c) 2023, Sallai András
-  * Szerkesztve: 2024, 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>
-Az útválasztás a routes.js fájlban:
-<code javascript app/rotues.js>
-const Router = require('express')
-const router = new Router()
-router.get('/msg', (req, res) => {
-    res.json({message: 'mehet'})
-})
-module.exports = router
-</code>
-A szerver belépési pontja, az index.js fájl tartalma:
-<code javascript app/index.js>
-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}`)
-})
-</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>
-const cors = require('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>
-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}`)
-})
-</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)