배경설명
개인 프로젝트에 새로운 기능을 추가해보고자 Papago API를 사용하기로 결정했다(혼자).
1) 네이버 개발자센터에서 파파고 API 권한 요청을 하고,
2) 클라이언트에서 axios 요청을 보냈지만,
3) 내가 받게 된 것은 올바른 response data가 아닌 빨간색 글씨의 CORS 이슈였다.(두둥)
프론트엔드 개발자라면 겪어봐야하는 과정이고, 풀어야할 숙제라고 들었기에 CORS 이슈는 반가웠다.
또한 최종 면접에서 CORS 개념과 경험을 물어봤었는데, 명확하게 이야기하지 못하고 얼버무렸었다.
이게 최탈의 전부는 아니겠지만, 나에게 아쉬웠던 순간 중 한 부분이었다.
그렇기에 CORS이슈, 오히려 좋아..
근데 며칠째 해결 못하는 거 보니 안반가운 것 같기도....
코드
나는 이렇게 파파고 API를 요청했다.
처음에는 따로 컴포넌트를 빼기도 하고, 서버도 만들고 그랬는데...
차근차근 하나씩 해결해가며 나중에 컴포넌트로 분리하고자 우선 필요한 라우터 안에서 사용하고 있다.
.env 파일을 이용해 API KEY와 ID도 관리해봤는데, 이 얘기는 다른 포스팅에서 해보겠다.
const handleTranslate = async () => {
try {
const clientId = process.env.REACT_APP_PAPAGO_CLIENT_ID;
const clientSecret = process.env.REACT_APP_PAPAGO_CLIENT_KEY;
const apiUrl = "https://openapi.naver.com/v1/papago/n2mt"; // 파파고 API 엔드포인트
const response = await axios.post(
apiUrl,
{
source: "en",
target: "ko",
text: movie.description_full,
},
{
headers: {
"Content-Type": "application/x-www-form-urlencoded; charset=UTF-8",
"X-Naver-Client-Id": clientId,
"X-Naver-Client-Secret": clientSecret,
},
}
);
setTranslatedText(response.data.message.result.translatedText);
} catch (error) {
console.error(error);
}
};
원인
네이버 개발자 포럼을 참고해 나와 같은 문제를 경험했던 사람들의 글을 보았다.
알게 된 정보 두가지
1) Proxy를 걸어야 개발환경에서 response 데이터가 잘 받아와진다.
2) 데이터랩의 API는 다른 사람의 Client ID, SECRET 을 도용해서 API를 호출하는 것을 막기 위해 서버 프로그래밍을 통해 호출하도록 되어있다.
프록시 설정을 하는 것은 근본적인 해결 방법이 아닌 것 같았다.
오케이. 답은 서버프로그래밍이다.
해결 방법
node.js를 이용해서 간단하게 서버를 구축해봤다.
처음 구축해보는 것이기 때문에 구글링 속에서 많은 사람들의 도움을 얻어 해결하였다.
1. 서버 코드 내 CORS 정책 직접 구현
두 번째 방법이 더 쉽고 간단하다..
express 애플리케이션에 미들웨어를 추가해서 직접 구현하는 방식이다.
server.js
const express = require("express");
require("dotenv").config();
const app = express();
app.use((req, res, next) => {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE");
res.header("Access-Control-Allow-Headers", "Content-Type");
next();
});
"Access-Control-Allow-Origin" : 클라이언트 도메인에 대한 액세스를 허용하는 헤더를 설정한다.
"Access-Control-Allow-Method" : 클라이언트에서 허용되는 HTTP 메소드를 지정한다.
"Access-Control-Allow-Headers" : 클라이언트에서 추가로 전송되는 헤더를 설정한다.
주의 next()를 호출하지 않으면 다음 미들웨어로 제어가 전달되지 않아 요청이 중단될 수 있음.
2. CORS 패키지 사용
npm install을 통해 cors 패키지를 설치해서 사용한다.
server.js
const cors = require("cors");
app.use(cors({
origin: '*',
methods: 'GET, POST, PUT, DELETE',
allowedHeaders: 'Content-Type',
}));위 코드는 1번 방법과 동일하게 작동하는 코드이다.
개선할 점
로컬환경에서는 잘 되는데, 배포하니까 405 에러가 뜬다...
url을 배포 url로 맞춰줬는데도 뭐가 잘못된건지 안된다. 다시 잘 해봐야지!
결론 : 나도 CORS 이슈 해결 !
전체 코드는 아래 링크에서 확인 가능합니다
궁금한 점이나 피드백 언제든 감사히 환영합니다 :>
https://github.com/meanz1/movie-project/blob/main/src/server.js
