[node.js] CORS 에러 해결 과정

cors 에러

저는 식물 커뮤니티 프로젝트를 진행하고 있었습니다.

문제없이 잘 진행하고 있다가 openAPI에서 값을 받아온 후 화면에 출력하는 과정에서 문제가 생겼는데...ㅠ

바로 CORS 에러!!!!!!!!!!!

동일한 출처일 땐 자원에 접근할 권한이 주어지지만 그렇지 않을 때는 권한이 없기 때문에 생기는 에러입니다.

 

프론트엔드쪽만 공부하면서 개발하고 있었기 때문에 이 문제도 프론트엔드 상에서 해결하려고 했습니다.

하지만.. 실패... !!!!!!! -_-....

 

저는 클라이언트쪽에서 공공데이터포털쪽 서버로 XMLHttpRequest를 이용해서 바로 데이터를 요청했습니다.

그렇게 한 결과 위에 사진처럼 cors 에러가 생겼죠 좀 더 알아보니깐 cors 에러를 해결하려면 서버 측에서 코드를 수정해야했습니다. 저는 기존 프로젝트를 apache 서버를 이용하고 있었기 때문에 apache 서버쪽에서 수정을 해보았지만 해결이 되지 않았습니다. ㅠㅠ

결국 node.js로 내가 직접 서버를 구축한 다음에 문제를 해결해야겠다고 생각해서 node.js를 시작했습니다...^^

( 프론트엔드쪽 공부 먼저 한 후에 백엔드쪽 공부하려구 했는데....... )

 

실험삼아 node.js로 서버를 간단하게 구축하고 아래와 같은 코드를 넣어서 cors를 해결하려고 했습니다.

const cors = require('cors');

app.use(cors());

하지만 이 코드를 넣었는데도 또 CORS 오류가????

 

또 cors 에러

---

CORS 해결을 위한 결론

제가 CORS 에러에 대해서 이해했다고 생각했는데 잘못 이해하고 있었습니다 ... 허허

저 코드만 추가해놓고 계속 클라이언트에서 요청을 하고 있었더라구요.

그러면 이론적으로는 해결을 하려면 공공데이터포털의 서버에서 내 요청을 허용하도록 바꿔줘야하는데 ..?

흠... 당연히 불가능했습니다.

근데 저 에러가 서버와 클라이언트 간에서 http 요청을 하면 생기는데 서버와 서버 상에서 요청을 하면 생기지 않습니다!!

그래서 node.js로 구축한 제 서버에서 공공데이터포털 서버로 요청을 했더니 데이터가 잘 받아졌습니다. ㅠㅠ

var request = require('request');

var url = 'http://openapi.nature.go.kr/openapi/service/rest/PlantService/plntIlstrSearch';
var queryParams = '?' + encodeURIComponent('serviceKey') + '=서비스키 넣으세욥'; /* Service Key*/
queryParams += '&' + encodeURIComponent('st') + '=' + encodeURIComponent('1');
queryParams += '&' + encodeURIComponent('sw') + '=' + encodeURIComponent('장미');
queryParams += '&' + encodeURIComponent('dateGbn') + '=' + encodeURIComponent(''); 
queryParams += '&' + encodeURIComponent('dateFrom') + '=' + encodeURIComponent('');
queryParams += '&' + encodeURIComponent('dateTo') + '=' + encodeURIComponent(''); 
queryParams += '&' + encodeURIComponent('numOfRows') + '=' + encodeURIComponent('10');
queryParams += '&' + encodeURIComponent('pageNo') + '=' + encodeURIComponent('1');

request({
    url: url + queryParams,
    method: 'GET'
}, function (error, response, body) {
    console.log('Reponse received', body);
});

오예 성공

클라이언트 측에서 출력

저렇게 제 서버에서 데이터를 받아온 후에 데이터를 파싱하고 클라이언트쪽으로 값을 전송해줬더니 화면에 잘 출력되었습니당 야호!

 

CORS가 어떤 건지 한 번 알고나니깐 다음에 또 에러가 생겨도 좀 더 쉽게 해결할 수 있을 것 같습니다!!