react + node js __ cors(Cross Origin Resource Sharing) 처리하기

GCP (Google Cloud Platform)의 compute engine에 react.js 앱 & server를 배포 한뒤

도메인을 구매하여 연동시키고 서버측 데이터를 사용하는 페이지에 접속하자

 

const response = await fetch('/????/contents');

와 같이 사용하자 

 

위와 같은 에러가 발생하였고 이에

    async function callAPI() {

        const response = await fetch('http://Domain.com:5000/????/contents');

        const body = await response.json();

        return body;

    }

이에 구글링을 통하여 찾은 내용으로 위와같이 수정을 하자 아래와 같은 에러 그리고 다른 수정을 통해서 다른 에러들이 발생하였습니다.

 

이에 구글링을 통하여 찾아낸 방법으로는

cors를 처리해주는 것인데,

cors란 Cross Origin Resource Sharing의 약자입니다.

특정 도메인이 다른 포트 또는 서버의 resource를 요청하는 상황인데

same-origin policy 정책에 의하여 cors의 상황은 브라우저의 보안목적으로 차단되게 됩니다.

 

제가 찾은 방법으로는 Access-Control-Allow-Origin response 를 추가해주는 방법으로

하단과 같이 따라하시면 됩니다.

1. 해당 server측 파일(저는 server.js 파일입니다)

에다가

해당 데이터를 얻어오는 

app.get('/????/contents', (req, res) => {

의 내부에

res.header("Access-Control-Allow-Origin", "*");

를 적어주게 되면

app.get('/????/contents', (req, res) => {

    res.header("Access-Control-Allow-Origin", "*");

res.send([

        { data!!!!!!! } ...

)

}

의 모양으로 사용 하면

해당 에러를 해결할 수 있습니다.