http 에서 https 주소 ajax 통신하기 > 그누보드5 팁자료실

그누보드5 팁자료실

http 에서 https 주소 ajax 통신하기 정보

http 에서 https 주소 ajax 통신하기

본문

http 에서 https 주소로 ajax 를 하게 된다면

예 ) http://this2.thisgun.net/g5/ 에서 https://this2.thisgun.net:4422/g5/ 으로 통신

XMLHttpRequest cannot load https://this2.thisgun.net:4422/g5/adm/ajax.token.php. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://this2.thisgun.net' is therefore not allowed access.

자바스크립트 크로스 도메인 정책에 어긋나서 위와 같은 에러가 나타나게 됩니다.

아래와 같이 한다면 정상적으로 데이터를 주고 받고 할수 있습니다.

jQuery 를 쓸 경우에는

xhrFields = {withCredentials: true}
crossDomain = true

값을 줍니다.

예 )

$.ajax({
  url: "test.html",
  xhrFields : {withCredentials: true},
  crossDomain : true,
});


서버에서 값을 아래와 같이 설정합니다.

Apache 서버 에서 .htaccess 가 가능하면 .htaccess 파일에 아래 내용을 적습니다. ( 도메인 정보는 적절히 수정 )

SetEnvIf Origin "http(s)?://(www\.)?(domain.com)$" AccessControlAllowOrigin=$0
Header add Access-Control-Allow-Origin %{AccessControlAllowOrigin}e env=AccessControlAllowOrigin
Header add Access-Control-Allow-Methods "PUT, GET, POST, DELETE, OPTIONS"
Header set Access-Control-Allow-Credentials true


nginx 서버에서는 아래와 같이 설정합니다. ( 도메인 정보는 적절히 수정 )


        if ($http_origin ~* (https?://[^/]*\.domain\.com(:[0-9]+)?)$) {
            set $cors "true";
        }

        if ($request_method = 'OPTIONS') {
            set $cors "${cors}options";
        }

        if ($request_method = 'GET') {
            set $cors "${cors}get";
        }
        if ($request_method = 'POST') {
            set $cors "${cors}post";
        }

        if ($cors = "trueget") {
            add_header 'Access-Control-Allow-Origin' "$http_origin";
            add_header 'Access-Control-Allow-Credentials' 'true';
        }

        if ($cors = "truepost") {
            add_header 'Access-Control-Allow-Origin' "$http_origin";
            add_header 'Access-Control-Allow-Credentials' 'true';
        }

        if ($cors = "trueoptions") {
            add_header 'Access-Control-Allow-Origin' "$http_origin";
            add_header 'Access-Control-Allow-Credentials' 'true';
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
            add_header 'Access-Control-Allow-Headers' 'Authorization,Content-Type,Accept,Origin,User-Agent,DNT,Cache-Control,X-Mx-ReqToken,Keep-Alive,X-Requested-With,If-Modified-Since';
            add_header 'Content-Length' 0;
            add_header 'Content-Type' 'text/plain charset=UTF-8';
            return 204;
        }




그누보드5의 경우 ajax 를 일괄적으로 http 에서 https 주소로 통신하게 하려면

head.sub.php
common.js

파일을 아래와 같이 수정합니다.

head.sub.php 파일에서
69번째 줄쯤에
var g5_bbs_url  = "<?php echo G5_BBS_URL ?>";

라고 되어 있는 코드 아래에 아래 코드를 넣습니다.

<?php if( G5_HTTPS_DOMAIN && G5_URL !== G5_HTTPS_DOMAIN ){ ?>
var g5_https_url  = "<?php echo G5_HTTPS_DOMAIN ?>";
<?php } ?>


common.js 파일의 마지막에 아래 코드를 넣습니다.

    jQuery( document ).ajaxSend(function(event, jqxhr, settings) {

        if( (typeof g5_https_url != 'undefined') && g5_https_url != g5_url && (typeof settings.url != 'undefined') ){
            var url = settings.url;

            settings.url = url.replace(g5_url, g5_https_url);
            settings.xhrFields = {withCredentials: true};
            settings.crossDomain = true;
        }
       
    });

위와 같이 하면 ajax url 이 http 이면 https 주소로 변환됩니다.


참고자료 :

https://gist.github.com/webarthur/a5d48715a7931fb93a1a94ad932313e0#file-setup-js-L14
https://stackoverflow.com/questions/18450310/nginx-add-header-not-working
추천
2

댓글 5개

전체 2,412 |RSS
그누보드5 팁자료실 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT