CORS(Cross-Origin Resource Sharing)\ub294 \uc6f9 \ube0c\ub77c\uc6b0\uc800\uc5d0\uc11c \uc2e4\ud589\ub418\ub294 \uc6f9 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc774 \uc790\uc2e0\uc758 \ucd9c\ucc98(origin)\uc640 \ub2e4\ub978 \ucd9c\ucc98\uc5d0 \uc788\ub294 \uc790\uc6d0\uc5d0 \uc811\uadfc\ud560 \uc218 \uc788\ub3c4\ub85d \ud5c8\uc6a9\ud558\ub294 \uba54\ucee4\ub2c8\uc998\uc785\ub2c8\ub2e4. \ucd9c\ucc98\ub780 \ud504\ub85c\ud1a0\ucf5c(\uc608: http, https), \ud638\uc2a4\ud2b8(\ub3c4\uba54\uc778), \ud3ec\ud2b8 \ubc88\ud638\uc758 \uc870\ud569\uc785\ub2c8\ub2e4. \uc608\ub97c \ub4e4\uc5b4, \uae30\ubcf8\uc801\uc73c\ub85c \uc6f9 \ube0c\ub77c\uc6b0\uc800\ub294 \ubcf4\uc548 \uc0c1\uc758 \uc774\uc720\ub85c \uc11c\ub85c \ub2e4\ub978 \ucd9c\ucc98 \uac04\uc758 \uc694\uccad\uc744 \uc81c\ud55c\ud569\ub2c8\ub2e4. \uc774\ub294 XSS(\uad50\ucc28 \uc0ac\uc774\ud2b8 \uc2a4\ud06c\ub9bd\ud305) \uacf5\uaca9 \ubc0f CSRF(\uad50\ucc28 \uc0ac\uc774\ud2b8 \uc694\uccad \uc704\uc870)\uc640 \uac19\uc740 \ubcf4\uc548 \uc704\ud611\uc73c\ub85c\ubd80\ud130 \uc0ac\uc6a9\uc790\ub97c \ubcf4\ud638\ud558\uae30 \uc704\ud55c \uac83\uc785\ub2c8\ub2e4. \ub530\ub77c\uc11c, CORS\ub294 \uc6f9 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc774 \uc548\uc804\ud558\uac8c \ub2e4\uc591\ud55c \ucd9c\ucc98\uc758 \ub9ac\uc18c\uc2a4\uc5d0 \uc811\uadfc\ud560 \uc218 \uc788\ub3c4\ub85d \ud558\ub294 \uaddc\uce59\uc744 \uc815\uc758\ud569\ub2c8\ub2e4.<\/p>\n CORS\ub294 HTTP \ud5e4\ub354\ub97c \ud1b5\ud574 \uc791\ub3d9\ud569\ub2c8\ub2e4. \uc11c\ubc84\ub294 \uc694\uccad\uc744 \ubc1b\uc740 \ud6c4 \ud074\ub77c\uc774\uc5b8\ud2b8\uc758 \uc694\uccad \ucd9c\ucc98\ub97c \uac80\uc99d\ud558\uace0, \ud544\uc694\uc5d0 \ub530\ub77c \uc801\uc808\ud55c CORS \ud5e4\ub354\ub97c \ucd94\uac00\ud558\uc5ec \uc751\ub2f5\ud569\ub2c8\ub2e4. \uc8fc\uc694 CORS \ud5e4\ub354\ub294 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4:<\/p>\n \ud074\ub77c\uc774\uc5b8\ud2b8\uac00 CORS \uc694\uccad\uc744 \ubcf4\ub0bc \ub54c, \ube0c\ub77c\uc6b0\uc800\ub294 \uba3c\uc800 OPTIONS \uba54\uc18c\ub4dc\ub97c \uc0ac\uc6a9\ud558\uc5ec Preflight \uc694\uccad\uc744 \uc218\ud589\ud569\ub2c8\ub2e4. \uc11c\ubc84\ub294 \uc774 \uc694\uccad\uc5d0 \ub300\ud55c \uc751\ub2f5\uc73c\ub85c CORS \ud5e4\ub354\ub97c \ud3ec\ud568\ud558\uc5ec \ud074\ub77c\uc774\uc5b8\ud2b8\uac00 \uc2e4\uc81c \uc694\uccad\uc744 \uc9c4\ud589\ud560 \uc218 \uc788\ub294\uc9c0 \uc5ec\ubd80\ub97c \ud655\uc778\ud569\ub2c8\ub2e4.<\/p>\n Express\uc5d0\uc11c\ub294 \uc124\uce58 \ud6c4, Express \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc5d0 \ud2b9\uc815 \ucd9c\ucc98\uc5d0 \ub300\ud574\uc11c\ub9cc CORS \uc694\uccad\uc744 \ud5c8\uc6a9\ud558\uace0 \uc2f6\ub2e4\uba74, CORS\ub97c \uc124\uc815\ud560 \ub54c \uc8fc\uc758\ud574\uc57c \ud560 \uc810\uc740, \ub108\ubb34 \ub9ce\uc740 \ucd9c\ucc98\ub97c \ud5c8\uc6a9\ud560 \uacbd\uc6b0 \ubcf4\uc548\uc5d0 \ucde8\uc57d\ud574\uc9c8 \uc218 \uc788\ub2e4\ub294 \uc810\uc785\ub2c8\ub2e4. \uc811\uadfc\uc744 \ud5c8\uc6a9\ud558\ub294 \ucd9c\ucc98\ub97c \uc5c4\uaca9\ud788 \uad00\ub9ac\ud558\uace0, \ud2b9\ud788 \ubbfc\uac10\ud55c \ub370\uc774\ud130\uc5d0 \ub300\ud55c \uc811\uadfc\uc740 \uc2e0\uc911\ud558\uac8c \uc124\uc815\ud574\uc57c \ud569\ub2c8\ub2e4.<\/p>\n CORS\uac00 \uc124\uc815\ub418\uc9c0 \uc54a\uc558\uac70\ub098 \uc798\ubabb \uc124\uc815\ub41c \uacbd\uc6b0 \ube0c\ub77c\uc6b0\uc800\ub294 CORS \uc5d0\ub7ec\ub97c \ubc1c\uc0dd\uc2dc\ud0b5\ub2c8\ub2e4. \uc774\ub7ec\ud55c \uc5d0\ub7ec\ub294 \uc77c\ubc18\uc801\uc73c\ub85c \ucf58\uc194\uc5d0\uc11c \ud655\uc778\ud560 \uc218 \uc788\uc73c\uba70, \uac1c\ubc1c\uc790\ub294 \uc11c\ubc84\uc758 CORS \uc124\uc815\uc744 \uc801\uc808\ud788 \uc218\uc815\ud558\uc5ec \ubb38\uc81c\ub97c \ud574\uacb0\ud574\uc57c \ud569\ub2c8\ub2e4.<\/p>\n CORS\ub294 \ud604\ub300 \uc6f9 \uc560\ud50c\ub9ac\ucf00\uc774\uc158 \uac1c\ubc1c\uc5d0\uc11c \ud544\uc218\uc801\uc778 \uc694\uc18c\uc785\ub2c8\ub2e4. \uc6f9 \ubcf4\uc548\uc744 \uac15\ud654\ud558\uba74\uc11c\ub3c4, \ub2e4\uc591\ud55c \ucd9c\ucc98\uc758 \ub9ac\uc18c\uc2a4\uc5d0 \uc548\uc804\ud558\uac8c \uc811\uadfc\ud560 \uc218 \uc788\ub3c4\ub85d \ud574\uc8fc\uae30 \ub54c\ubb38\uc5d0 \uac1c\ubc1c\uc790\ub294 CORS\uc758 \uac1c\ub150\uacfc \uc124\uc815 \ubc29\ubc95\uc744 \uc798 \uc774\ud574\ud558\uace0 \ud65c\uc6a9\ud574\uc57c \ud569\ub2c8\ub2e4.<\/p>\n Express \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uad6c\ucd95\ud560 \ub54c CORS\ub294 \uaf2d \uc124\uc815\ud574\uc57c \ud560 \uc0ac\ud56d\uc774\uba70, \uc704\uc758 \uc608\uc81c \ucf54\ub4dc\ub97c \ud1b5\ud574 \uc27d\uac8c \uc801\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ud56d\uc0c1 \ubcf4\uc548\uc744 \uc5fc\ub450\uc5d0 \ub450\uace0, \ud544\uc694\ud55c \ucd9c\ucc98\ub9cc \ud5c8\uc6a9\ud558\ub294 \ucca0\uc800\ud55c \uc815\ucc45\uc744 \uc720\uc9c0\ud558\uc2dc\uae38 \ubc14\ub78d\ub2c8\ub2e4.<\/p>\n <\/body><\/p>\n","protected":false},"excerpt":{"rendered":"https:\/\/example.com<\/code>\uacfc https:\/\/api.example.com<\/code>\uc740 \ub2e4\ub978 \ucd9c\ucc98\ub85c \uac04\uc8fc\ub429\ub2c8\ub2e4.<\/p>\n2. CORS\uc758 \ud544\uc694\uc131<\/h2>\n
2.1 CORS\uc758 \ub3d9\uc791 \uc6d0\ub9ac<\/h3>\n
\n
Access-Control-Allow-Origin<\/code>: \ud5c8\uc6a9\ub41c \ucd9c\ucc98\ub97c \uc9c0\uc815\ud569\ub2c8\ub2e4.<\/li>\nAccess-Control-Allow-Methods<\/code>: \ud5c8\uc6a9\ub41c HTTP \uba54\uc18c\ub4dc\ub97c \uba85\uc2dc\ud569\ub2c8\ub2e4.<\/li>\nAccess-Control-Allow-Headers<\/code>: \ud5c8\uc6a9\ub41c \uc694\uccad \ud5e4\ub354\ub97c \uc9c0\uc815\ud569\ub2c8\ub2e4.<\/li>\nAccess-Control-Expose-Headers<\/code>: \ud074\ub77c\uc774\uc5b8\ud2b8\uac00 \uc811\uadfc\ud560 \uc218 \uc788\ub294 \ud5e4\ub354\ub97c \uc815\uc758\ud569\ub2c8\ub2e4.<\/li>\n<\/ul>\n2.2 CORS\uc758 \uc2e4\uc81c \ub3d9\uc791 \uc608\uc2dc<\/h3>\n
3. Express\uc5d0\uc11c CORS \uc124\uc815\ud558\uae30<\/h2>\n
cors<\/code> \ubbf8\ub4e4\uc6e8\uc5b4\ub97c \uc0ac\uc6a9\ud558\uc5ec CORS\ub97c \uc27d\uac8c \uc124\uc815\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uba3c\uc800 cors<\/code> \ud328\ud0a4\uc9c0\ub97c \uc124\uce58\ud574\uc57c \ud569\ub2c8\ub2e4:<\/p>\nnpm install cors<\/code><\/pre>\n3.1 \uae30\ubcf8\uc801\uc778 \uc0ac\uc6a9\ubc95<\/h3>\n
cors<\/code> \ubbf8\ub4e4\uc6e8\uc5b4\ub97c \ucd94\uac00\ud558\uc5ec \ubaa8\ub4e0 \ucd9c\ucc98\uc5d0 \ub300\ud574 CORS \uc694\uccad\uc744 \ud5c8\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\nconst express = require('express');\nconst cors = require('cors');\n\nconst app = express();\n\n\/\/ CORS \ubbf8\ub4e4\uc6e8\uc5b4 \uc0ac\uc6a9\napp.use(cors());\n\napp.get('\/api\/data', (req, res) => {\n res.json({ message: 'CORS \uc124\uc815 \uc131\uacf5!' });\n});\n\napp.listen(3000, () => {\n console.log('\uc11c\ubc84\uac00 3000\ubc88 \ud3ec\ud2b8\uc5d0\uc11c \uc2e4\ud589 \uc911\uc785\ub2c8\ub2e4.');\n});\n<\/code><\/pre>\n3.2 \ud2b9\uc815 \ucd9c\ucc98\uc5d0 \ub300\ud55c CORS \uc124\uc815<\/h3>\n
cors<\/code> \ubbf8\ub4e4\uc6e8\uc5b4\uc5d0 \uc124\uc815 \uac1d\uccb4\ub97c \uc804\ub2ec\ud558\uba74 \ub429\ub2c8\ub2e4. \uc544\ub798 \ucf54\ub4dc\ub294 https:\/\/example.com<\/code>\uc5d0\uc11c \uc624\ub294 \uc694\uccad\ub9cc \ud5c8\uc6a9\ud558\ub294 \uc608\uc81c\uc785\ub2c8\ub2e4.<\/p>\nconst express = require('express');\nconst cors = require('cors');\n\nconst app = express();\n\n\/\/ \ud2b9\uc815 \ucd9c\ucc98\uc5d0 \ub300\ud574\uc11c\ub9cc CORS \ud5c8\uc6a9\nconst allowedOrigins = ['https:\/\/example.com'];\n\napp.use(cors({\n origin: function(origin, callback){\n \/\/ \ucd9c\ucc98\uac00 \uc5c6\ub294 \uacbd\uc6b0 (\uc608: \ub85c\uceec \uc694\uccad) \ud5c8\uc6a9\n if(!origin) return callback(null, true);\n if(allowedOrigins.indexOf(origin) === -1){\n const msg = 'CORS \uc815\ucc45\uc5d0 \uc758\ud574 \uc811\uadfc\uc774 \uac70\ubd80\ub418\uc5c8\uc2b5\ub2c8\ub2e4.';\n return callback(new Error(msg), false);\n }\n return callback(null, true);\n }\n}));\n\napp.get('\/api\/data', (req, res) => {\n res.json({ message: '\ud2b9\uc815 \ucd9c\ucc98 CORS \uc124\uc815 \uc131\uacf5!' });\n});\n\napp.listen(3000, () => {\n console.log('\uc11c\ubc84\uac00 3000\ubc88 \ud3ec\ud2b8\uc5d0\uc11c \uc2e4\ud589 \uc911\uc785\ub2c8\ub2e4.');\n});\n<\/code><\/pre>\n4. CORS\uc758 \ubcf4\uc548 \uace0\ub824\uc0ac\ud56d<\/h2>\n
5. CORS \uc5d0\ub7ec \ucc98\ub9ac<\/h2>\n
6. \uacb0\ub860<\/h2>\n