Tartalomjegyzék

< Express

Express - Cors ES

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 1) 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
//...
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:

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

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:

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