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
예 ) 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
2
댓글 5개
그누보드 업데이트 예정 내용인가요 ㅎ
크로스 도메인 문제는 서버에서 설정해야 하는 문제 때문에,
업데이트 하지 않겠습니다.
업데이트 하지 않겠습니다.
좋은 정보 감사합니다.
좋은 자료네요.
좋아요..잘쓰겠습니다.감사합니다.