Nodejs(express) 통신 CORS, CORS Pre-Flight 설정하기

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. Github – nilcolor
참고링크2. Github – expressjs

Leave a Reply

  1. 구글지도원츄

    헉..댓글에 스크립트 주소를 넣으니깐 확 사라지네요.. 이거 뭐 댓글 수정도 안되고 삭제도 안되네요ㅠㅠㅠ
    댓글 폭탄이 될듯합니다.. 죄송합니다~

    일단 하단에 제가 남긴 댓글 참고부분입니다.. 구글 지도 API 사용관련 예제사이트입니다..
    https://developers.google.com/maps/documentation/javascript/examples/map-simple?hl=ko

    자바스크립트+HTML 부분을 누르시면 해당예제의 하단에 스크립트부분이 있습니다.
    API KEY는 아래와 같이 등록하면 되구요.. 예제사이트에서 callback=initMap 이부분이 initMap부분에
    Cheolguso님이 initialize를 등록해주심 됩니다..

    그다음… 마지막은 아래 댓글과 같습니다..

    • 안녕하세요. ‘구글지도원츄’님
      제가 게을러서 확인이 너무 늦었네요. 죄송합니다.
      이렇게 친절히 문제의 상황과 그에 따른 해결방법까지 적어주셔서 너무 감사드립니다!!
      말씀해주신 부분은 포스트에 추가 기입하도록 하겠습니다 :)

  2. 구글지도원츄

    아래 질문댓글을 달았는데. 하다보니 성공했네요^^.. 혹시나 찾는분들을 위해 댓글을 남깁니다.
    Cheolguso님이 만들어주신 예제 중에 대신 API KEY를 기입할 수 있는 스크립트로 변경합니다..

    YOUR_API_KEY에 발급받은 API 키를 기입하시면 되며 LOAD_MAP_FUNCTION 이 부분이 지도를 불러오는 부분입니다.
    여기에 해당함수를 기입하시면 됩니다.. 즉 initialize를 기입하시면됩니다..
    initialize는 Cheolguso님이 만들어주신 예제의 지도로드함수입니다…

    마지막으로 google.maps.event.addDomListener(window, ‘load’, initialize); 이부분을 주석처리 해주시면..
    API KEY를 이용하여 지도를 로드할 수 있습니다…

  3. 구글지도원츄

    안녕하세요. 혹시 api key는 어디에 기입하는지 아시나요? node js 기반으로 웹앱을 만들고있는데요.
    현재 이 예제와 같이 했더니 경고문구가 뜨네요.. 근데 지도 로드는 되네요.. ㅎㅎ;

  4. 열심히하는일학년

    안녕하세요 이번에 API 처음 배우는데 지도까지 불렀는데 마커를 추가를하면 데이터베이스엔 저장이되는데 페이지를 새로고침할경우 마커가 안뜨더라고요ㅠㅠㅠ이거 왜이럴까요?

    • 안녕하세요 일학년님,
      도움이 되어 드리고 싶지만.. 말씀하신 글 만으로는 어떠한 상황인지 알 수가 없네요 ㅠ

  5. featur

    지나가는 나그네 입니다.

    깔끔하게 정리된 글 잘 보았습니다.

    2. 구글맵 자바스크립트 API

    2-1. Javascript API

    예제의 맨 밑 jquery end 에서 ); 가 빠진것 같습니다.

    • 안녕하세요! 이런.. 한참을 모르고 있었네요.. 감사합니다 :D

  6. sh

    구글맵 API를 사용하고싶어서 찾아보다가 좋은 글이 있어서 해볼려고 하는데요
    그 서버에 API를 올리고 싶어서 그런데요
    sudo nano /var/www/ DOCTYPE.html 이렇게 해서 거기다가 소스를 쳐주면 되는건가요?
    sudo nano /var/www/ funtions.php

    구글맵 테그랑 자바스크립트는.. 어떤 파일에 코딩을 해줘야할까요??? API도 처음이고 라즈베리도 처음이라 모르는게 너무 많아서요… 죄송합니다 ㅠㅠ

    • 안녕하세요?! 처음에 글을 단순히 메모용으로 적다보니 너무 밑도 끝도 없네요…
      우선… nano나 vi로 추가하실 html 또는 php 파일에 접근하셔서
      ( 참고 – 본문 마지막 [댓글에는 태그가 적히지 않아서 본문 가장 아래에 추가하였습니다] )
      이런 구조로 작성하시면 됩니다 ~
      제가 댓글 남겨주신 부분을 잘 이해하고 맞게 답을 드린건지 잘 모르겠네요 ㅠ

  7. vomvoru

    id=”google-map” >> id=”google_map”
    댓글 수정이 안되네요? ㅠㅠ 댓그에 태그형식이 있으면 없어지구요 ㅠㅠ
    이거 이걸로 고쳐주세요. 사이트 디자인에 영감을 많이 얻고 갑니다.

    • 이런… 큰 실수가 있었네요. 이렇게 문제점도 남겨주시고,
      부족함이 많은 사이트임에도 좋게 봐주셔서 감사합니다 :D