WebRTC에 대해 알아보고 간단한 화상 통화 샘플 프로젝트를 만들어보자
2024-11-24
Nodejs(express) 통신 CORS, CORS Pre-Flight 설정하기
2018-02-25
Explanation
CORS, Preflight에 관한 설명은 얕은 지식으로 적는것보단 참고된 링크를 확인하는게 좋을 것 같습니다.
참고링크 : developer.mozilla.org – Access_control_CORS
간단하게..
* CORS: CORS는 Cross-Origin Resource Sharing, 다른 도메인의 호출을 승인하거나 차단하는 것을 결정합니다. 대체적으로 기본값은 다른 도메인 혹은 다른 포트 혹은 서브 도메인 모두 허용되지 않습니다.
* Preflight: 요즘은 JSON 타입으로 통신을 하는 경우가 많습니다. 하지만 예를 들어 POST 메서드로 콘텐츠 타입 Application/json으로 통신하는 것은 표준이 아닙니다. 그렇기 때문에 브라우저는 OPTION 이라는 메서드로 서버로 사전 전달을 하여 승인을 받은 후 실제 데이터를 전송합니다.
(대략.. CORS나 preflight 설정을 해주지 않으면 아래와 비슷한 오류가 출력됩니다.)
Failed to load http://localhost:1111/test: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:2222’ is therefore not allowed access.
그리고 간단하게 CORS와 Preflight를 설정해 본다면,
(혹시나..)
이 글의 취지는 CORS, Preflight 설정을 모두 허용해주어야 한다는 것이 아닙니다!!
설정이 필요할 경우 아래와 같이 설정을 할 수 있다는 예시입니다.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
// express, body-parser, cors 모듈은 설치해줘야 합니다. const express = require('express'); const bodyParser = require('body-parser'); const app = express(); app.use(bodyParser.json()); // body로 온 json의 데이터를 오브젝트 형태로 읽을 수 있게 합니다. const cors = require('cors'); // cors 모듈을 가져와서 const corsOpt = function(req, callbank) { callbank(null, {origin: true}); }; // 모든 도메인의 통신을 허용합니다. app.options('*', cors(corsOpt)); // 모든 options 메서드로의 사전 전달 접근을 허용합니다. app.post('/test', cors(corsOpt), function (req, res) { res.send({test: 'ok'}); }); app.listen(1111, function () { console.log('Example app listening on port 1111!'); }); |
참고링크1. Github – nilcolor
참고링크2. Github – expressjs
