크로스 도메인 No 'Access-Control-Allow-Origin' 해결해보자

이번 글은 크로스 도메인에 관련된 글이다.

웹 개발 하는 도중 크로스 도메인 문제를 안 겪은 사람은 없을 것이다.

해결방법은 여러가지 있겠지만, 이 글에선 jsonp를 통해 해결해보겠다.

client는 당연히 javascript를 이용할 것이고, server는 nodejs를 이용하겠다.

client 도메인 - 'http://182.161.117.18' 

server 도메인 - 'http://182.161.117.18:8888'

$.ajax({
    url: 'http://182.161.117.18:8888/',
    type: 'get',
    dataType: 'json',
    contentType: "application/json",
    success: function (data) {
        
    },
    error:function(request,status,error){
        
    }

});

기본적인 ajax 코드 틀이라고 보면 된다.

아무런 설정이 없었다면 크로스 도메인 오류가 뜬다.

해결법은 두 가지 방법을 다뤄본다.

1. $.ajax 

2. $.getJSON

먼저 $.ajax 를 보자.

Client

$.ajax({
        url: url,
        type: 'get',
        dataType: 'jsonp',
        contentType: "application/json",
        success: function (data) {

        },
        error:function(request,status,error){
           
        }

    });
}

Server

app.get('/', function(req,res){
    var data;
    // data 변수에 넘겨줄 데이터 처리
    res.send(req.query.callback + '('+ data + ');');
});

Client쪽에선 dataType을 jsonp로 설정하면 되고,

Server쪽에선 url에 있는 callback을 통해 데이터를 실어서 반환해주면 된다.

jsonp를 이용함으로써 가능한 흐름이다.

이번에는 $.getJSON 보자.

$.getJSON('http://182.161.117.18:8888?callback=?' , function(data){
    
});

url 뒤에 '?callback=?' 만 넣어주면 된다.

이건 첫번째 방법처럼 jsonp를 명시해주지 않았지만 똑같이 jsonp를 이용한다.

그 이유는 jquery에 있다.

jquery 자체에서 ? 기호를 인식하여 jsonp 형태로 바꾸기 때문이다.