[TIL] CORS 오류 node.js 서버 만들어서 요청 데이터 받기

미니 팀프로젝트! 지역별 산책로 코스를 소개해주는 앱니다.

open API를 이용해서 산책로 정보등 보여주고, 지도에 산책로 코스를 띄워줘야한다.

제공해주는 api에 경로 path를 따와서 산책로를 지도에 그려줘야하는데 XML파일로 제공되었다. 

gpxparser

@kazukinagata/react-xml-parser

gpx-parser-ts

등등 XML을 읽어주는 파서라이브러리들을 써봤는데

어떤건 오래되서.. 어떤건 사용법이 제대로 나와있지 않아서 등드등 사용할만한 라이브러리 찾기가 힘들었음

겨우 찾은 라이브러리로 파싱이 성공하나 싶었는데

서버에서 서버로 요청은 파싱을 잘 해서 데이터를 가져왔는데

브라우저에서 CORS 에러가 떳다 ㅠㅠ

OPEN API에서 제대로 불러오지못하는 ㅠㅠ

이러면 서버쪽에서 뭔가를 바꾸거나 해야한다고하는데..

 <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" />

배포등 프로토콜 차이 문제로 서버랑 클라이언트 CORS 오류가 뜨면 위 meta태그를 head에 넣어주면 해결된다고했는데 안된다.......... 

뚜둥

 

해결방법 1

CORS 오류를 대신 처리해준 후 받아와주는 라이브러리 찾기

 

해결방법 2

클라이언트에서 api서버에 요청을해서 데이터를 받아오지 못하니

서버를 만들어서 서버에서 (만든)서버로 데이터를 불러온후

그 서버에 요청을해서 받아와야하는 상황

 

결국 node.js 서버를 만들기로 ㅎㅎㅎ

호호호

 

폴더 생성 -> server.js 파일 생성

 

 

yarn add xml2js cors node-fetch express nodemon

 

필요한 패키지 설치 !

 

// server.js


const express = require('express');
const fetch = require('node-fetch'); // 추가: fetch를 사용하기 위해 node-fetch를 import해야 합니다.
const app = express();
const cors = require('cors');
const xml2js = require('xml2js');

app.use(cors());

// req 요청에 관한 정보를 담음
// res 응답에 관한 정보를 담음
app.get('/', (req, res) => {
    res.send('응답완료');
});
app.get('/gpx', (req, res) => {
    const GPX_URL = req.query.data;
    console.log(req);
    // req.body
    async function get(url) {
        try {
            const fetchUrl = await fetch(url);
            const file = await fetchUrl.text();
            const parser = new xml2js.Parser();

            parser.parseString(file, (err, result) => {
                if (err) {
                    console.log(err);
                    return;
                }

                const coordinates = [];
                const trkpts = result.gpx.trk[0].trkseg[0].trkpt;
                for (const trkpt of trkpts) {
                    const lat = parseFloat(trkpt.$.lat);
                    const lon = parseFloat(trkpt.$.lon);

                    coordinates.push({ lat, lon });
                }
                res.send(coordinates);
            });
        } catch (error) {
            console.log(error);
            res.status(500).send(error.message);
        }
    }

    get(GPX_URL);
});

const port = 5000;
app.listen(port, () => {
    console.log(`Listening on port ${port}`);
});

* CommonJS 포맷은 Node.js (서버사이드 자바스크립트) 의 표준

- CommonJS를 쓰려면 node-fetch@2 버전 2 이하를 써야한다

- CommonJS를 구분하는 가장 쉬운 방법으로 require()와 module.exports를 사용하는 것으로 판단할 수 있음. (ECMA Script 모듈의 경우 import, export 사용)

- Class, Singleton 등을 사용할 수 있음
- Node의 경우 CommonJS를 기본으로 사용함
- Webpack 역시 CommonJS를 기본으로 사용함

 

리액트(클라이언트단)에서

const fetchGPX = async () => {

      const res = await axios.get(`URL주소`);     

};

fetchGPX();

이렇게 하면 위도와 경도를 아주 싹 그냥 가져와버린다!!

 

서버 배포는 글리치로 ! 배포까지 완료 !

json 서버 배포와 다르지않다!

 

어제오늘 멘탈 탈탈탈 털리기 직전이엇지만 가져온것만으로도 매우 기쁘다 ㅎㅎㅎㅎㅎㅎ

But 이제 다시 시작 

ㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎ