D3.js 를 사용하여 데이터 시각화하기 #6 Click, Drag 이벤트 사용하기
2020-07-29
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
