{"id":38366,"date":"2024-11-01T17:17:56","date_gmt":"2024-11-01T17:17:56","guid":{"rendered":"http:\/\/atmokpo.com\/w\/?p=38366"},"modified":"2024-11-26T06:44:31","modified_gmt":"2024-11-26T06:44:31","slug":"express-%ea%b0%9c%eb%b0%9c-%ea%b0%95%ec%a2%8c-express-js%ec%97%90%ec%84%9c-cors-%ec%84%a4%ec%a0%95%ed%95%98%eb%8a%94-%eb%b0%a9%eb%b2%95","status":"publish","type":"post","link":"https:\/\/atmokpo.com\/w\/38366\/","title":{"rendered":"Express \uac1c\ubc1c \uac15\uc88c, Express.js\uc5d0\uc11c CORS \uc124\uc815\ud558\ub294 \ubc29\ubc95"},"content":{"rendered":"

<\/p>\n

\n \ud604\ub300 \uc6f9 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc740 \uc5ec\ub7ec \uc11c\ubc84\uc640 API\uac00 \uc0c1\ud638\uc791\uc6a9\ud558\uba70 \uc815\ubcf4\ub97c \uc8fc\uace0\ubc1b\ub294 \ud615\ud0dc\ub85c \uc124\uacc4\ub418\uace0 \uc788\uc2b5\ub2c8\ub2e4.
\n \uc774 \uacfc\uc815\uc5d0\uc11c CORS(Cross-Origin Resource Sharing)\ub77c\ub294 \uac1c\ub150\uc774 \uad49\uc7a5\ud788 \uc911\uc694\ud558\uac8c \uc791\uc6a9\ud569\ub2c8\ub2e4.
\n CORS\ub294 \uc678\ubd80 \ub3c4\uba54\uc778\uc5d0\uc11c \uc790\uc6d0\uc744 \uc694\uccad\ud560 \ub54c \ube0c\ub77c\uc6b0\uc800\uac00 \uc774\ub97c \ud5c8\uc6a9\ud560\uc9c0 \uacb0\uc815\ud558\ub294 \uba54\ucee4\ub2c8\uc998\uc785\ub2c8\ub2e4.
\n \uc774 \uae00\uc5d0\uc11c\ub294 Express.js\uc5d0\uc11c CORS\ub97c \uc124\uc815\ud558\ub294 \ubc29\ubc95\uc744 \ub2e8\uacc4\ubcc4\ub85c \uc790\uc138\ud558\uac8c \uc54c\uc544\ubcf4\uaca0\uc2b5\ub2c8\ub2e4.\n<\/p>\n

1. CORS\uc758 \uc774\ud574<\/h2>\n

\n CORS\ub780 \ud558\ub098\uc758 \uc0ac\uc774\ud2b8\uc5d0\uc11c \ub2e4\ub978 \uc0ac\uc774\ud2b8\uc758 \uc790\uc6d0\uc5d0 \uc811\uadfc\ud558\ub294 \uac83\uc744 \ud5c8\uc6a9\ud558\ub294 \ubcf4\uc548 \uae30\ub2a5\uc785\ub2c8\ub2e4.
\n \uc6f9 \ube0c\ub77c\uc6b0\uc800\ub294 \uae30\ubcf8\uc801\uc73c\ub85c \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\uc5d0\uc11c \ub2e4\ub978 \ub3c4\uba54\uc778\uc73c\ub85c\uc758 \uc694\uccad\uc744 \ucc28\ub2e8\ud569\ub2c8\ub2e4.
\n \uc608\ub97c \ub4e4\uc5b4, ‘https:\/\/example.com’\uc5d0\uc11c \ud638\uc2a4\ud305\ub418\ub294 \uc6f9 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc774 ‘https:\/\/api.example.com’\ub85c API \uc694\uccad\uc744 \ud558\ub824\uace0 \ud558\uba74,
\n \ube0c\ub77c\uc6b0\uc800\ub294 \uc774\ub97c \ucc28\ub2e8\ud558\uace0 CORS \uc624\ub958\ub97c \ubc1c\uc0dd\uc2dc\ud0b5\ub2c8\ub2e4.
\n \uc774\ub294 \uc6f9 \ubcf4\uc548\uc744 \uac15\ud654\ud558\uae30 \uc704\ud55c \uae30\ub2a5\uc785\ub2c8\ub2e4.\n<\/p>\n

2. Express.js\uc5d0\uc11c CORS\ub97c \uc124\uc815\ud558\ub294 \uc774\uc720<\/h2>\n

\n Express.js\ub294 \uc11c\ubc84\uc640 API\ub97c \uc27d\uac8c \uad6c\ucd95\ud560 \uc218 \uc788\ub294 \uac15\ub825\ud55c \uc6f9 \ud504\ub808\uc784\uc6cc\ud06c\uc785\ub2c8\ub2e4.
\n \ud558\uc9c0\ub9cc \uc678\ubd80 \ub3c4\uba54\uc778\uc5d0\uc11c\uc758 \uc694\uccad\uc744 \ud5c8\uc6a9\ud558\ub824\uba74 CORS \uc124\uc815\uc774 \ud544\uc694\ud569\ub2c8\ub2e4.
\n \uc774\ub97c \ud1b5\ud574 \uc5ec\ub7ec\ubd84\uc758 API\uac00 \uc2e0\ub8b0\ud560 \uc218 \uc788\ub294 \ub3c4\uba54\uc778\uc5d0\uc11c\ub9cc \uc694\uccad\uc744 \ubc1b\uc744 \uc218 \uc788\ub3c4\ub85d \uc81c\uc5b4\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.
\n CORS\ub97c \uc801\uc808\ud788 \uc124\uc815\ud558\uc9c0 \uc54a\uc73c\uba74 \ubcf4\uc548 \uc704\ud611\uc5d0 \ub178\ucd9c\ub420 \uc218 \uc788\uc2b5\ub2c8\ub2e4.\n<\/p>\n

3. CORS \uc124\uc815 \ubc29\ubc95<\/h2>\n

\n Express.js\uc5d0\uc11c CORS\ub97c \uc124\uc815\ud558\ub294 \ubc29\ubc95\uc740 \uc5ec\ub7ec \uac00\uc9c0\uac00 \uc788\uc9c0\ub9cc, \uac00\uc7a5 \uc77c\ubc18\uc801\uc73c\ub85c \uc0ac\uc6a9\ud558\ub294 \ubc29\ubc95\uc740 cors<\/code> \ud328\ud0a4\uc9c0\ub97c \ud65c\uc6a9\ud558\ub294 \uac83\uc785\ub2c8\ub2e4.
\n \uc774 \ud328\ud0a4\uc9c0\ub294 CORS \uad00\ub828 \ub85c\uc9c1\uc744 \uac04\ub2e8\ud558\uac8c \ucc98\ub9ac\ud560 \uc218 \uc788\ub3c4\ub85d \ub3c4\uc640\uc90d\ub2c8\ub2e4. \uc774\uc81c \uc124\uce58 \ubc0f \uc124\uc815 \ubc29\ubc95\uc744 \uc0b4\ud3b4\ubcf4\uaca0\uc2b5\ub2c8\ub2e4.\n<\/p>\n

3.1. CORS \ud328\ud0a4\uc9c0 \uc124\uce58\ud558\uae30<\/h3>\n
npm install cors<\/code><\/pre>\n
\n    \uba3c\uc800, CORS \ud328\ud0a4\uc9c0\ub97c \ud504\ub85c\uc81d\ud2b8\uc5d0 \uc124\uce58\ud574\uc57c \ud569\ub2c8\ub2e4.
\n    \uc704\uc758 \uba85\ub839\uc5b4\ub97c \uc0ac\uc6a9\ud558\uc5ec CORS \ud328\ud0a4\uc9c0\ub97c \uc124\uce58\ud569\ub2c8\ub2e4.\n<\/p>\n
3.2. \uae30\ubcf8 CORS \uc124\uc815<\/h3>\n
\n    \uc124\uce58\uac00 \uc644\ub8cc\ub418\uba74 Express \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc5d0\uc11c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub3c4\ub85d \uc124\uc815\ud569\ub2c8\ub2e4.
\n    \uae30\ubcf8\uc801\uc778 \uc124\uc815\uc740 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4.\n<\/p>\n
javascript\nconst express = require('express');\nconst cors = require('cors');\n\nconst app = express();\napp.use(cors()); \/\/ CORS \uc124\uc815 \ucd94\uac00\n\napp.get('\/api\/data', (req, res) => {\n    res.json({ message: 'CORS\uac00 \uc124\uc815\ub41c \ub370\uc774\ud130\uc785\ub2c8\ub2e4.' });\n});\n\napp.listen(3000, () => {\n    console.log('\uc11c\ubc84\uac00 http:\/\/localhost:3000 \uc5d0\uc11c \uc2e4\ud589 \uc911\uc785\ub2c8\ub2e4.');\n});\n<\/code><\/pre>\n
\n    \uc704 \ucf54\ub4dc\uc5d0\uc11c app.use(cors());<\/code> \uad6c\ubb38\uc774 CORS\ub97c \ud65c\uc131\ud654\uc2dc\ud0b5\ub2c8\ub2e4.
\n    \uc774\uc81c \uc774 \uc11c\ubc84\ub294 \ubaa8\ub4e0 \ub3c4\uba54\uc778\uc5d0\uc11c\uc758 \uc694\uccad\uc744 \uc218\ub77d\ud558\uac8c \ub429\ub2c8\ub2e4.\n<\/p>\n
3.3. CORS \uc635\uc158 \uc124\uc815\ud558\uae30<\/h3>\n
\n    \ubaa8\ub4e0 \ub3c4\uba54\uc778\uc5d0\uc11c \uc694\uccad\uc744 \uc218\ub77d\ud558\ub294 \uac83\uc740 \ubcf4\uc548\uc0c1 \uc704\ud5d8\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.
\n    \ud2b9\uc815 \ub3c4\uba54\uc778\ub9cc \ud5c8\uc6a9\ud558\uace0 \uc2f6\ub2e4\uba74 CORS \uc635\uc158\uc744 \uc124\uc815\ud574\uc57c \ud569\ub2c8\ub2e4.
\n    \uc544\ub798 \uc608\uc81c\uc5d0\uc11c \ud2b9\uc815 \ub3c4\uba54\uc778\uc5d0 \ub300\ud574 \uc694\uccad\uc744 \ud5c8\uc6a9\ud558\ub294 \ubc29\ubc95\uc744 \ubcf4\uc5ec\ub4dc\ub9bd\ub2c8\ub2e4.\n<\/p>\n
javascript\nconst express = require('express');\nconst cors = require('cors');\n\nconst app = express();\nconst allowedOrigins = ['http:\/\/example.com', 'http:\/\/another-domain.com'];\n\napp.use(cors({\n    origin: allowedOrigins, \/\/ \ud5c8\uc6a9\ub41c \ub3c4\uba54\uc778\n    methods: ['GET', 'POST'], \/\/ \ud5c8\uc6a9\ub41c HTTP \uba54\uc18c\ub4dc\n    allowedHeaders: ['Content-Type', 'Authorization'], \/\/ \ud5c8\uc6a9\ub41c \ud5e4\ub354\n}));\n\napp.get('\/api\/data', (req, res) => {\n    res.json({ message: '\ud2b9\uc815 \ub3c4\uba54\uc778\uc5d0\uc11c \uc694\uccad\ud55c \ub370\uc774\ud130\uc785\ub2c8\ub2e4.' });\n});\n\napp.listen(3000, () => {\n    console.log('\uc11c\ubc84\uac00 http:\/\/localhost:3000 \uc5d0\uc11c \uc2e4\ud589 \uc911\uc785\ub2c8\ub2e4.');\n});\n<\/code><\/pre>\n
\n    \uc704 \ucf54\ub4dc\ub294 allowedOrigins<\/code> \ubc30\uc5f4\uc5d0 \uc9c0\uc815\ub41c \ub3c4\uba54\uc778\ub9cc \uc694\uccad\ud560 \uc218 \uc788\ub3c4\ub85d \uc124\uc815\ud569\ub2c8\ub2e4.
\n    methods<\/code>\uc640 allowedHeaders<\/code> \uc635\uc158\uc73c\ub85c HTTP \uba54\uc18c\ub4dc\uc640 \ud5c8\uc6a9\ub41c \ud5e4\ub354\ub3c4 \ucd94\uac00\uc801\uc73c\ub85c \uc9c0\uc815\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.\n<\/p>\n
3.4. \ud2b9\uc218\ud55c CORS \uc124\uc815<\/h3>\n
\n    \uac00\ub054\uc740 \ud2b9\uc815 \uc694\uad6c \uc0ac\ud56d\uc5d0 \ub530\ub77c CORS \uc815\ucc45\uc744 \uc138\ubc00\ud558\uac8c \uc124\uc815\ud574\uc57c \ud560 \ub54c\uac00 \uc788\uc2b5\ub2c8\ub2e4.
\n    \uc608\ub97c \ub4e4\uc5b4 \uc778\uc99d\ub41c \uc694\uccad\uc5d0\uc11c ‘Credential’\uc744 \ud5c8\uc6a9\ud558\ub824\uba74 \uc544\ub798\uc640 \uac19\uc774 \uc124\uc815\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.\n<\/p>\n
javascript\nconst express = require('express');\nconst cors = require('cors');\n\nconst app = express();\nconst allowedOrigins = ['http:\/\/example.com'];\n\napp.use(cors({\n    origin: allowedOrigins,\n    credentials: true, \/\/ \uc778\uc99d\ub41c \uc694\uccad \ud5c8\uc6a9\n}));\n\napp.get('\/api\/data', (req, res) => {\n    res.json({ message: '\uc778\uc99d\uc774 \ud5c8\uc6a9\ub41c \ub370\uc774\ud130\uc785\ub2c8\ub2e4.' });\n});\n\napp.listen(3000, () => {\n    console.log('\uc11c\ubc84\uac00 http:\/\/localhost:3000 \uc5d0\uc11c \uc2e4\ud589 \uc911\uc785\ub2c8\ub2e4.');\n});\n<\/code><\/pre>\n
\n    \uc704 \uc608\uc2dc\uc5d0\uc11c credentials: true<\/code> \uc635\uc158\uc744 \ucd94\uac00\ud568\uc73c\ub85c\uc368, \uc778\uc99d\ub41c \uc694\uccad\uc774 \ud5c8\uc6a9\ub429\ub2c8\ub2e4.
\n    \ud074\ub77c\uc774\uc5b8\ud2b8\uc5d0\uc11c \uc778\uc99d \uc815\ubcf4(\uc608: \ucfe0\ud0a4)\ub97c \ud3ec\ud568\ud558\uc5ec \uc694\uccad\uc774 \uac00\ub2a5\ud55c \uc0c1\ud0dc\uac00 \ub429\ub2c8\ub2e4.\n<\/p>\n
3.5. CORS \uc624\ub958 \ucc98\ub9ac\ud558\uae30<\/h3>\n
\n    \uc885\uc885 \ud074\ub77c\uc774\uc5b8\ud2b8\uc5d0\uc11c CORS \uc624\ub958\uac00 \ubc1c\uc0dd\ud560 \uc218 \uc788\ub294\ub370, \uc774\ub294 \ube0c\ub77c\uc6b0\uc800\uac00 \uc694\uccad\uc744 \ucc28\ub2e8\ud558\uae30 \ub54c\ubb38\uc785\ub2c8\ub2e4.
\n    \uc11c\ubc84\uac00 \uc62c\ubc14\ub974\uac8c CORS\ub97c \uc124\uc815\ud588\ub354\ub77c\ub3c4 \uba87 \uac00\uc9c0 \uc774\uc720\ub85c \uc778\ud574 \uc624\ub958\uac00 \ubc1c\uc0dd\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.
\n    \uc624\ub958\ub97c \ud574\uacb0\ud558\ub824\uba74 \ub2e4\uc74c\uacfc \uac19\uc740 \uc810\uc744 \uba3c\uc800 \ud655\uc778\ud574\uc57c \ud569\ub2c8\ub2e4.\n<\/p>\n