[소소한 개발 일지] serverless-nextjs를 통해 개발, 상용 스테이지로 나눠서 배포하기
2021-01-21
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
헉..댓글에 스크립트 주소를 넣으니깐 확 사라지네요.. 이거 뭐 댓글 수정도 안되고 삭제도 안되네요ㅠㅠㅠ
댓글 폭탄이 될듯합니다.. 죄송합니다~
일단 하단에 제가 남긴 댓글 참고부분입니다.. 구글 지도 API 사용관련 예제사이트입니다..
https://developers.google.com/maps/documentation/javascript/examples/map-simple?hl=ko
자바스크립트+HTML 부분을 누르시면 해당예제의 하단에 스크립트부분이 있습니다.
API KEY는 아래와 같이 등록하면 되구요.. 예제사이트에서 callback=initMap 이부분이 initMap부분에
Cheolguso님이 initialize를 등록해주심 됩니다..
그다음… 마지막은 아래 댓글과 같습니다..
안녕하세요. ‘구글지도원츄’님
제가 게을러서 확인이 너무 늦었네요. 죄송합니다.
이렇게 친절히 문제의 상황과 그에 따른 해결방법까지 적어주셔서 너무 감사드립니다!!
말씀해주신 부분은 포스트에 추가 기입하도록 하겠습니다 :)
아래 질문댓글을 달았는데. 하다보니 성공했네요^^.. 혹시나 찾는분들을 위해 댓글을 남깁니다.
Cheolguso님이 만들어주신 예제 중에 대신 API KEY를 기입할 수 있는 스크립트로 변경합니다..
YOUR_API_KEY에 발급받은 API 키를 기입하시면 되며 LOAD_MAP_FUNCTION 이 부분이 지도를 불러오는 부분입니다.
여기에 해당함수를 기입하시면 됩니다.. 즉 initialize를 기입하시면됩니다..
initialize는 Cheolguso님이 만들어주신 예제의 지도로드함수입니다…
마지막으로 google.maps.event.addDomListener(window, ‘load’, initialize); 이부분을 주석처리 해주시면..
API KEY를 이용하여 지도를 로드할 수 있습니다…
안녕하세요. 혹시 api key는 어디에 기입하는지 아시나요? node js 기반으로 웹앱을 만들고있는데요.
현재 이 예제와 같이 했더니 경고문구가 뜨네요.. 근데 지도 로드는 되네요.. ㅎㅎ;
안녕하세요 이번에 API 처음 배우는데 지도까지 불렀는데 마커를 추가를하면 데이터베이스엔 저장이되는데 페이지를 새로고침할경우 마커가 안뜨더라고요ㅠㅠㅠ이거 왜이럴까요?
안녕하세요 일학년님,
도움이 되어 드리고 싶지만.. 말씀하신 글 만으로는 어떠한 상황인지 알 수가 없네요 ㅠ
지나가는 나그네 입니다.
깔끔하게 정리된 글 잘 보았습니다.
2. 구글맵 자바스크립트 API
2-1. Javascript API
예제의 맨 밑 jquery end 에서 ); 가 빠진것 같습니다.
안녕하세요! 이런.. 한참을 모르고 있었네요.. 감사합니다 :D
구글맵 API를 사용하고싶어서 찾아보다가 좋은 글이 있어서 해볼려고 하는데요
그 서버에 API를 올리고 싶어서 그런데요
sudo nano /var/www/ DOCTYPE.html 이렇게 해서 거기다가 소스를 쳐주면 되는건가요?
sudo nano /var/www/ funtions.php
구글맵 테그랑 자바스크립트는.. 어떤 파일에 코딩을 해줘야할까요??? API도 처음이고 라즈베리도 처음이라 모르는게 너무 많아서요… 죄송합니다 ㅠㅠ
안녕하세요?! 처음에 글을 단순히 메모용으로 적다보니 너무 밑도 끝도 없네요…
우선… nano나 vi로 추가하실 html 또는 php 파일에 접근하셔서
( 참고 – 본문 마지막 [댓글에는 태그가 적히지 않아서 본문 가장 아래에 추가하였습니다] )
이런 구조로 작성하시면 됩니다 ~
제가 댓글 남겨주신 부분을 잘 이해하고 맞게 답을 드린건지 잘 모르겠네요 ㅠ
id=”google-map” >> id=”google_map”
댓글 수정이 안되네요? ㅠㅠ 댓그에 태그형식이 있으면 없어지구요 ㅠㅠ
이거 이걸로 고쳐주세요. 사이트 디자인에 영감을 많이 얻고 갑니다.
이런… 큰 실수가 있었네요. 이렇게 문제점도 남겨주시고,
부족함이 많은 사이트임에도 좋게 봐주셔서 감사합니다 :D