{"id":38332,"date":"2024-11-01T17:17:40","date_gmt":"2024-11-01T17:17:40","guid":{"rendered":"http:\/\/atmokpo.com\/w\/?p=38332"},"modified":"2024-11-26T06:44:37","modified_gmt":"2024-11-26T06:44:37","slug":"express-%ea%b0%9c%eb%b0%9c-%ea%b0%95%ec%a2%8c-%eb%b3%b4%ec%95%88-%ea%b3%a0%eb%a0%a4%ec%82%ac%ed%95%ad-%eb%b0%8f-cors-%ec%a0%95%ec%b1%85","status":"publish","type":"post","link":"https:\/\/atmokpo.com\/w\/38332\/","title":{"rendered":"Express \uac1c\ubc1c \uac15\uc88c, \ubcf4\uc548 \uace0\ub824\uc0ac\ud56d \ubc0f CORS \uc815\ucc45"},"content":{"rendered":"

<\/p>\n

\n
\n

\uc791\uc131\uc790: \uc870\uad11\ud615<\/p>\n

\uc791\uc131\uc77c: 2024\ub144 11\uc6d4 26\uc77c<\/p>\n<\/header>\n

\n

1. \uc11c\ub860<\/h2>\n

Express\ub294 Node.js\ub97c \uae30\ubc18\uc73c\ub85c \ud55c \uacbd\ub7c9 \uc6f9 \ud504\ub808\uc784\uc6cc\ud06c\ub85c, \ubc31\uc5d4\ub4dc \uc11c\ubc84 \uac1c\ubc1c\uc5d0 \ub110\ub9ac \uc0ac\uc6a9\ub429\ub2c8\ub2e4. \uadf8\ub7ec\ub098, \uc6f9 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uac1c\ubc1c\ud560 \ub54c \ubcf4\uc548\uc740 \uac00\uc7a5 \uc911\uc694\ud55c \uace0\ub824\uc0ac\ud56d \uc911 \ud558\ub098\uc785\ub2c8\ub2e4. \uc774 \uac15\uc88c\uc5d0\uc11c\ub294 Express \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc5d0 \ub300\ud55c \ubcf4\uc548 \uace0\ub824\uc0ac\ud56d\uacfc CORS(\uad50\ucc28 \ucd9c\ucc98 \ub9ac\uc18c\uc2a4 \uacf5\uc720) \uc815\ucc45\uc5d0 \ub300\ud574 \uc790\uc138\ud788 \uc54c\uc544\ubcf4\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n<\/section>\n

\n

2. Express\uc758 \ubcf4\uc548 \uace0\ub824\uc0ac\ud56d<\/h2>\n

\uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc758 \ubcf4\uc548\uc744 \uac15\ud654\ud558\uae30 \uc704\ud574 \ub2e4\uc74c\uacfc \uac19\uc740 \ubc29\ubc95\ub4e4\uc744 \uc801\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n

2.1. HTTPS \uc0ac\uc6a9<\/h3>\n

HTTP \ub300\uc2e0 HTTPS\ub97c \uc0ac\uc6a9\ud568\uc73c\ub85c\uc368, \ub370\uc774\ud130 \uc804\uc1a1 \uc2dc \uc554\ud638\ud654\ub97c \ud1b5\ud574 \uc815\ubcf4\uc758 \uc720\ucd9c\uacfc \uc911\uac04\uc790 \uacf5\uaca9\uc744 \ubc29\uc9c0\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. Express \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc5d0\uc11c HTTPS\ub97c \uc124\uc815\ud558\ub294 \ubc29\ubc95\uc740 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n

\nconst express = require('express');\nconst https = require('https');\nconst fs = require('fs');\n\nconst app = express();\nconst PORT = 3000;\n\n\/\/ SSL \uc778\uc99d\uc11c \uacbd\ub85c \uc124\uc815\nconst options = {\n    key: fs.readFileSync('\/path\/to\/private-key.pem'),\n    cert: fs.readFileSync('\/path\/to\/certificate.pem')\n};\n\n\/\/ HTTPS \uc11c\ubc84 \uc0dd\uc131\nhttps.createServer(options, app).listen(PORT, () => {\n    console.log(`HTTPS \uc11c\ubc84\uac00 \ud3ec\ud2b8 ${PORT}\uc5d0\uc11c \uc2e4\ud589 \uc911\uc785\ub2c8\ub2e4.`);\n});\n            <\/code><\/pre>\n
2.2. Helmet \ubbf8\ub4e4\uc6e8\uc5b4 \uc0ac\uc6a9<\/h3>\n
Helmet\uc740 Express \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc758 \ubcf4\uc548\uc744 \ub192\uc774\uae30 \uc704\ud574 HTTP \ud5e4\ub354\ub97c \uc124\uc815\ud558\ub294 \ubbf8\ub4e4\uc6e8\uc5b4\uc785\ub2c8\ub2e4. \ub2e4\uc74c\uacfc \uac19\uc774 \uc27d\uac8c \uc801\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
\nconst helmet = require('helmet');\n\napp.use(helmet());\n            <\/code><\/pre>\n
2.3. \ub370\uc774\ud130 \uac80\uc99d \ubc0f \uc778\uac00<\/h3>\n
\uc11c\ubc84\uc5d0\uc11c \uc0ac\uc6a9\ud558\ub294 \uc785\ub825 \ub370\uc774\ud130\uc5d0 \ub300\ud574 \ucca0\uc800\ud55c \uac80\uc99d \ubc0f \uc778\uac00 \uc808\ucc28\ub97c \uad6c\ud604\ud574\uc57c \ud569\ub2c8\ub2e4. \uc608\ub97c \ub4e4\uc5b4, \uc0ac\uc6a9\uc790\uac00 \uc785\ub825\ud55c \ub370\uc774\ud130\uc5d0 \ub300\ud574 xss \ud544\ud130\ub9c1, SQL \uc778\uc81d\uc158 \ubc29\uc9c0\ub97c \uc704\ud55c Prepared Statement \ub4f1\uc744 \uc0ac\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
\nconst { body, validationResult } = require('express-validator');\n\napp.post('\/user', [\n    body('email').isEmail(),\n    body('password').isLength({ min: 5 })\n], (req, res) => {\n    const errors = validationResult(req);\n    if (!errors.isEmpty()) {\n        return res.status(400).json({ errors: errors.array() });\n    }\n\n    \/\/ \uc720\uc800 \uc0dd\uc131 \ub85c\uc9c1\n});\n            <\/code><\/pre>\n
2.4. \ube44\ubc00\ubc88\ud638 \ud574\uc2dc\ud654<\/h3>\n
\uc0ac\uc6a9\uc790 \ube44\ubc00\ubc88\ud638\ub294 \ud3c9\ubb38\uc73c\ub85c \uc800\uc7a5\ud558\uc9c0 \uc54a\uace0 \ud574\uc2dc \ucc98\ub9ac\ud558\uc5ec \uc800\uc7a5\ud574\uc57c \ud569\ub2c8\ub2e4. bcrypt\uc640 \uac19\uc740 \ub77c\uc774\ube0c\ub7ec\ub9ac\ub97c \uc0ac\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
\nconst bcrypt = require('bcrypt');\n\nconst saltRounds = 10;\nconst myPlaintextPassword = 's0\/\\\/\\P4$$w0rD';\n\nbcrypt.hash(myPlaintextPassword, saltRounds, function(err, hash) {\n    \/\/ \ud574\uc2dc\ub41c \ube44\ubc00\ubc88\ud638 \ub370\uc774\ud130\ubca0\uc774\uc2a4\uc5d0 \uc800\uc7a5\n});\n            <\/code><\/pre>\n
2.5. \uc5d0\ub7ec \ud578\ub4e4\ub9c1<\/h3>\n
\uc5d0\ub7ec \ud578\ub4e4\ub9c1\uc744 \ud1b5\ud574 \uc0ac\uc6a9\uc790\uc5d0\uac8c \ubd88\ud544\uc694\ud55c \uc815\ubcf4\uac00 \ub178\ucd9c\ub418\ub294 \uac83\uc744 \ubc29\uc9c0\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc801\uc808\ud55c \uc5d0\ub7ec \uba54\uc2dc\uc9c0\ub97c \uc815\uc758\ud558\uace0 \ub85c\uadf8\ub97c \uad00\ub9ac\ud558\uc5ec \ubcf4\uc548\uc131\uc744 \ub192\uc774\ub294 \uac83\uc774 \uc88b\uc2b5\ub2c8\ub2e4.<\/p>\n
\napp.use((err, req, res, next) => {\n    console.error(err.stack);\n    res.status(500).send('\ubb34\uc5b8\uac00 \uc798\ubabb\ub418\uc5c8\uc2b5\ub2c8\ub2e4!');\n});\n            <\/code><\/pre>\n<\/section>\n
\n
3. CORS \uc815\ucc45<\/h2>\n
CORS\ub294 “Cross-Origin Resource Sharing”\uc758 \uc57d\uc790\ub85c, \uc6f9 \ud398\uc774\uc9c0\uac00 \ub2e4\ub978 \ucd9c\ucc98\uc758 \ub9ac\uc18c\uc2a4\uc5d0 \uc811\uadfc\ud560 \uc218 \uc788\ub3c4\ub85d \ud574\uc8fc\ub294 \uba54\ucee4\ub2c8\uc998\uc785\ub2c8\ub2e4. CORS \uc815\ucc45\uc744 \uc774\ud574\ud558\uace0 \uc124\uc815\ud558\ub294 \uac83\uc740 \ubcf4\uc548\uacfc \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc758 \uc815\uc0c1 \uc791\ub3d9\uc5d0 \ud544\uc218\uc801\uc785\ub2c8\ub2e4.<\/p>\n
3.1. CORS\uc758 \ud544\uc694\uc131<\/h3>\n
\ubaa8\ub358 \uc6f9 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc740 \uc885\uc885 \ub2e4\uc591\ud55c \ucd9c\ucc98\uc758 API\uc640 \uc0c1\ud638\uc791\uc6a9\ud569\ub2c8\ub2e4. \uc774\ub54c, \ube0c\ub77c\uc6b0\uc800\ub294 \ubcf4\uc548 \uc0c1\uc758 \uc774\uc720\ub85c \uad50\ucc28 \ucd9c\ucc98 \uc694\uccad\uc744 \uc81c\ud55c\ud569\ub2c8\ub2e4. CORS\ub294 \uc774 \uc81c\ud55c\uc744 \uc124\uc815\ud558\uace0 \uad00\ub9ac\ud560 \uc218 \uc788\ub294 \ubc29\ubc95\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4.<\/p>\n
3.2. CORS\ub97c \uc124\uc815\ud558\ub294 \ubc29\ubc95<\/h3>\n
Express\uc5d0\uc11c CORS\ub97c \uc124\uc815\ud560 \ub54c\ub294 ‘cors’ \ubbf8\ub4e4\uc6e8\uc5b4\ub97c \uc0ac\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc124\uce58 \ud6c4 \uc544\ub798\uc640 \uac19\uc774 \uc124\uc815\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
\nconst cors = require('cors');\n\n\/\/ CORS \ubbf8\ub4e4\uc6e8\uc5b4 \uc0ac\uc6a9\napp.use(cors({\n    origin: 'https:\/\/example.com', \/\/ \ud5c8\uc6a9\ud560 \ucd9c\ucc98\n    methods: ['GET', 'POST'], \/\/ \ud5c8\uc6a9\ud560 HTTP \uba54\uc11c\ub4dc\n    allowedHeaders: ['Content-Type', 'Authorization'] \/\/ \ud5c8\uc6a9\ud560 \ud5e4\ub354\n}));\n            <\/code><\/pre>\n
3.3. \ud2b9\uc815 \uacbd\ub85c\uc5d0 \ub300\ud55c CORS \uc124\uc815<\/h3>\n
\ud2b9\uc815 \uacbd\ub85c\uc5d0\ub9cc CORS\ub97c \uc801\uc6a9\ud558\uace0 \uc2f6\uc740 \uacbd\uc6b0, \uc635\uc158\uc744 \uc9c0\uc815\ud558\uc5ec \uac1c\ubcc4\uc801\uc73c\ub85c \uc124\uc815\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
\napp.get('\/api\/data', cors(), (req, res) => {\n    res.json({ data: '\ub370\uc774\ud130\uc785\ub2c8\ub2e4.' });\n});\n            <\/code><\/pre>\n
4. CORS \uad00\ub828 \ubcf4\uc548 \uace0\ub824\uc0ac\ud56d<\/h2>\n
CORS\ub97c \uc124\uc815\ud560 \ub54c \uc8fc\uc758\ud574\uc57c \ud560 \uc810\uc740 \ud5c8\uc6a9\ud560 \ucd9c\ucc98\ub97c \uc815\ud655\ud788 \uc9c0\uc815\ud558\ub294 \uac83\uc785\ub2c8\ub2e4. ‘*’\uc640 \uac19\uc740 \uc640\uc77c\ub4dc\uce74\ub4dc\ub97c \uc0ac\uc6a9\ud558\uba74 \ubaa8\ub4e0 \ub3c4\uba54\uc778\uc5d0\uc11c \uc694\uccad\ud560 \uc218 \uc788\uac8c \ub418\ubbc0\ub85c, \ud544\uc694\ud55c \uacbd\uc6b0\uc5d0\ub9cc \uc0ac\uc6a9\ud574\uc57c \ud569\ub2c8\ub2e4.<\/p>\n
4.1. \uc694\uccad \ud5e4\ub354\uc640 \uba54\uc11c\ub4dc \uc81c\ud55c<\/h3>\n
CORS \uc124\uc815 \uc2dc, \ud5c8\uc6a9\ud560 \uc694\uccad \ud5e4\ub354\uc640 HTTP \uba54\uc11c\ub4dc\ub97c \ucca0\uc800\ud788 \uad00\ub9ac\ud558\uc5ec \ubcf4\uc548\uc744 \uac15\ud654\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
4.2. Credential \uc9c0\uc6d0<\/h3>\n
\uc778\uc99d \uc815\ubcf4\ub97c \ud3ec\ud568\ud55c \uc694\uccad\uc744 \ucc98\ub9ac\ud574\uc57c \ud560 \uacbd\uc6b0, ‘Access-Control-Allow-Credentials’ \ud5e4\ub354\ub97c true\ub85c \uc124\uc815\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ub2e4\ub9cc, \uc694\uccad\uc758 \ucd9c\ucc98\ub97c \uc81c\ud55c\ud574\uc57c \ud569\ub2c8\ub2e4.<\/p>\n
\napp.use(cors({\n    origin: 'https:\/\/example.com',\n    credentials: true\n}));\n            <\/code><\/pre>\n
5. \uacb0\ub860<\/h2>\n
Express\uc5d0\uc11c\uc758 \ubcf4\uc548 \uace0\ub824\uc0ac\ud56d \ubc0f CORS \uc815\ucc45\uc740 \uc6f9 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc758 \uc548\uc804\uc131\uacfc \uc131\ub2a5\uc5d0 \ud070 \uc601\ud5a5\uc744 \ubbf8\uce69\ub2c8\ub2e4. HTTPS, Helmet, \ub370\uc774\ud130 \uac80\uc99d, \ube44\ubc00\ubc88\ud638 \ud574\uc2dc\ud654 \ub4f1\uc758 \ubc29\ubc95\uc744 \ud1b5\ud574 \ubcf4\uc548\uc744 \uac15\ud654\ud558\uace0, CORS\ub97c \uc801\uc808\ud788 \uc124\uc815\ud558\uc5ec \ub2e4\uc591\ud55c \ucd9c\ucc98\uc640 \uc548\uc804\ud558\uac8c \uc0c1\ud638\uc791\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
\uc55e\uc73c\ub85c\uc758 \uc6f9 \uc560\ud50c\ub9ac\ucf00\uc774\uc158 \uac1c\ubc1c\uc5d0\uc11c\ub3c4 \ubcf4\uc548\uc744 \ud56d\uc0c1 \uc5fc\ub450\uc5d0 \ub450\uace0, \uc815\uae30\uc801\uc73c\ub85c \ubcf4\uc548 \uc0c1\ud0dc\ub97c \uc810\uac80\ud558\ub294 \uac83\uc774 \uc911\uc694\ud569\ub2c8\ub2e4.<\/p>\n<\/section>\n