Express - Cors

Szerző: Sallai András
Copyright © 2023, Sallai András
Szerkesztve: 2024
Licenc: CC Attribution-Share Alike 4.0 International
Web: https://szit.hu

Szerver

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

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

Készítsünk kliens

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 szerveren, például lite-server.

{
    "server": ["src"]
}

pnpm install lite-server

Ha Insomnia, Postman, HTTPie vagy curl segítségével nézem meg az API-t nincs probléma.

Ha készítek egy weblapot, ami a kliensként fog működni, és az egy másik szerveren futtatom, például a lite-serveren, akkor ez nem fog működni. A Cors beállításokra panaszkodik.

A cors beállítása

pnpm install cors

const cors = require('cors')
 
app.use(cors())

Ezzel a beállítással már működik.

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

Linkek

https://www.test-cors.org/ (2023)