인프런 커뮤니티 질문&답변

Kim Siyoon님의 프로필 이미지
Kim Siyoon

작성한 질문수

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

18-게시판 API 만들기 실습

게시판 API 만들기 - cors 빨간 밑

작성

·

327

0

안녕하세요 선생님!

강의 게시판 API 만들기 실습을 보고

ApolloServer 안에 cors: true를 적었는데 빨간 밑줄이 생기면서 '

{ typeDefs: string; resolvers: { Query: { fetchBoards: () => Promise<Board[]>; }; Mutation: { createBoard: (parent: any, args: any, context: any, info: any) => Promise<string>; }; }; cors: boolean; }' 형식의 인수는 'ApolloServerOptions<any>' 형식의 매개 변수에 할당될 수 없습니다.
개체 리터럴은 알려진 속성만 지정할 수 있으며 'ApolloServerOptionsWithTypeDefs<any>' 형식에 'cors'이(가) 없습니다.

 

라고 오류가 떴는데 아무리 찾아봐도 해결방법을 몰라 글을 올리게 되었습니다

 

답변 1

1

노원두님의 프로필 이미지
노원두
지식공유자

안녕하세요! Siyoon님!

해당 라이브러리 구조가 변경된 것 같아요!
기존에 rest-api에서 함께 사용되었던 cors라는 라이브러리가 있었는데,
apollo 측에서 자체 cors기능을 제거하고 cors라이브러리를 통합하여 사용하는 것으로 정책이 변경된 것 같아요!

따라서, apollo 홈페이지에 접속해보시면 아래와같은 해결책이 나와있어요!
(독스주소: https://www.apollographql.com/docs/apollo-server/security/cors/ )

image

위 내용을 이해하기 쉽도록 아래의 그림을 통해 설명을 드려볼게요!


기존의 rest-api에서 사용하던 cors를 통합하기로 하였으므로, rest-api 라이브러리를 설치해 주셔야하는데 이 라이브러리 이름은 1) express 랍니다!
또한, express에서 기존에 함께 사용되던 2) cors 라이브러리도 설치해 주셔야해요!

마지막으로, 현재 사용중인 graphql과 rest-api를 통합하기 위해,
apollo셋팅은 유지한 상태에서, 3) rest-api의 엔드포인트를 app.use() 라는 함수를 통해 만들어 주셔야 합니다.

image

cors 구현이 갑자기 복잡해져서 혼란이 오실 수도 있을 것 같아요!
본 수업에서는 api를 만드는 과정이 훨씬 더 중요하기 때문에 이 부분에 집중하여 수업을 먼저 마무리 지어주시고, 여유 시간에 업데이트된 cors에 대해서도 공부해 보시면 좋을 것 같아요!^^

cors 부분 오류 해결 없이 api 진행이 되나요??

Kim Siyoon님의 프로필 이미지
Kim Siyoon

작성한 질문수

질문하기