공공데이터 포털에서 데이터 API를 가져오던 중 결국 만나게 된
error:500 / Cors 정책 위반...

해당 방법을 우회하는 법은 여러가지가 있지만 Node.js를 배우고 있던 중이라
Node.js로 해당 API를 받아오고 해당 서버에서 REACT 프로젝트로 데이터를 가져오는 방법을 사용하기로 했다.

Node.js 기본 빌드

기본적으로 Node.js 설치를 하고 server.js를 만든다.
.env는 apiKey 값을 따로 저장하기 위해 생성

dotenv

node.js에서는 기본적으로 .env의 파일을 가져오는 방법이 없는듯 하다.
그래서 해당 dotenv를 설치하여 .env파일의 내용을 가져온다

설치

npm i dotenv

사용법

import dotenv from "dotenv";

dotenv.config();

const apiKey = process.env.API_KEY;
const apiUrl = process.env.API_URL;

해당 사용법이 끝!
라이브러리 한번 설치만으로 쉽게 .env를 가져올 수 있다.

cors

cors는 웹브라우저에서 보안 목적으로 도메인 간 리소스 요청을 제한하는 정책인데, 현재 http는 https와 요청을 보내고 응답을 받는 것을 제한하기 때문에 특정 우회방법이 필요하다.

특히 dev 환경에서는 http://localhost:3000 와 같은 주소를 사용하게 되는데 이 환경에서는 https에서 제공하는 데이터를 수신하지 못할 확률이 매우 높다.

그래서 npm에서 cors를 설치하면 해당 문제를 해결 할 수 있다.

설치하기

npm install cors

먼저 기본적으로 npm으로 설치한다.

사용법

import cors from "cors";

const app = express();
app.use(cors());

하면 바로 가능하다..!
옵션값을 설정도 가능한데

// 기본 사용법 (모든 도메인 허용)
app.use(cors());

// 특정 도메인만 허용, method 제한
app.use(cors({
    origin: 'http://localhost:3000'
    methods: ["GET", "POST", "PUT", "DELETE", "OPTIONS"],
}));

해당 형태로 설정후 app.get()을 실행하면 CORS 정책을 위반하지 않고 무사히 데이터를 가져올 수 있다!

---

험난했던 Node.js로 CORS 정책 우회하기! 는 여기까지!

힘들게 가져온 데이터로 열심히 프로젝트를 만들어야지~