Deno Oak CORS 비활성화
로컬 환경에서 React JS 앱과 Deno API 백엔드를 연결하려고 할 때 CORS (Cross-Origin Resource Sharing) 문제가 발생하는 경우 당신은 혼자가 아닙니다. CORS 오류는 귀찮을 수 있지만, 다행히도 해결 방법이 있습니다.
해결 방법 1: oakCors 미들웨어 사용
첫 번째 해결 방법은 Deno API의 app.ts 파일에서 oakCors 미들웨어를 사용하는 것입니다:
import { oakCors } from "https://deno.land/x/cors/mod.ts";
// ...
app.use(
oakCors({
origin: "http://localhost:3000"
}),
);
이 해결 방법은 “http://localhost:3000″에서의 요청이 필요한 ‘Access-Control-Allow-Origin’ 헤더를 응답에 추가하여 Deno API 백엔드에 액세스 할 수 있게 해줍니다.
해결 방법 2: 모든 Origin 허용
만약 모든 origin에서의 요청을 허용하고 싶다면, 다음 구성을 사용할 수 있습니다:
app.use(oakCors({ origin: "*" }));
이 접근 방식을 사용할 때는 보안 위험이 발생할 수 있으므로 주의해야 합니다. 들어오는 요청을 올바르게 유효성 검사하고 검사해야 합니다.
해결 방법 3: Routes 전에 oakCors 설정하기
일부 경우에는 oakCors를 라우트를 정의하기 전에 설정해야 할 수도 있습니다. 다음은 예시입니다:
app.use(oakCors({
origin: 'http://localhost:4200',
optionsSuccessStatus: 200,
}));
app.use(router.routes());
라우트에 도달하기 전에 oakCors를 설정함으로써 요청이 도달하기 전에 올바르게 CORS 헤더가 설정되도록 보장합니다.
결론
oakCors를 구현하고 Deno API 앱에서 적절하게 설정함으로써 React JS 프론트엔드와 Deno 백엔드 간의 원활한 통신을 로컬 개발 중에 가능하게 할 수 있습니다.
모든 origin을 허용할 때는 주의하고, 언제나 애플리케이션의 안전을 위해 적절한 보안 조치를 적용해야 합니다.
Deno CORS에 대한 자세한 옵션과 정보는 공식 Deno CORS 문서를 확인해 주세요.
참고 자료 :
https://stackoverflow.com/questions/62301531/deno-oak-disable-cors
같은 카테고리의 다른 글 보기 :
