Apollo-server cors에서 https 차단 문제..제발 도와주세요..!ㅠㅠㅠㅠ

Question

안녕하세요 next.js 를 클라이언트로 graphql과 apollo를 활용해 서버를 만들어 gcp에 올려 배포까지 해서 다 끝났다 싶었는데 cors에서 막히는 것 같습니다ㅠㅠㅠㅠ 아무리 검색을 해도 안나와서 선배님들에게 조언을 듣고 싶습니다.. 문제는 http에선 apollo-server에 접근이 가능했지만 https로 바뀌면서 아예 apollo-server에 접근이 되질 않습니다..cors 문제인 거 같은데 여기서 어떻게 접근을 해야할지 막막합니다.. cors를 false로 했는데도 그러네요...여전히 http 주소로 접근할 땐 잘 되지만 https 도메인 주소로 접근했을 땐 막힙니다..오류 메세지는 다음과 같습니다Mixed Content: The page at '' was loaded over HTTPS, but requested an insecure resource ''. This request has been blocked; the content must be served over HTTPS apollo server import express from "express"; import { ApolloServer } from "apollo-server-express"; import { ApolloServerPluginDrainHttpServer } from "apollo-server-core"; import resolvers from "./resolvers/index.js"; import schema from "./schema/index.js"; import http from "http"; import { randomDB, readDB, reverseDB } from "./dbController.js"; import dotenv from "dotenv"; const app = express(); dotenv.config(); const httpServer = http.createServer(app); const server = new ApolloServer({ typeDefs: schema, resolvers, context: { db: { cody: reverseDB("cody"), products: randomDB("products"), perfumes: randomDB("perfumes"), music: randomDB("music"), }, }, plugins: [ApolloServerPluginDrainHttpServer({ httpServer })], }); await server.start(); server.applyMiddleware({ app, path: "/graphql", cors: { origin: ["http://localhost:3000","http://52.6155.284.21:3000(외부 아이피 주소)", "https://(도메인 주소를 넣었는데 안됩니다)" "https://studio.apollographql.com"], credentials: true, allowedHeaders }, }); await new Promise((resolve) => httpServer.listen({ port: 8000 }, resolve)); console.log(`🚀 Server ready at http://localhost:8000${server.graphqlPath}`); nginx 설정입니다. 이 이후로 https로 접근하면 바로 페이지가 뜨지만 apollo에서 인식이 안됩니다..server { listen 80; listen [::]:80; server_name (도메인이름) (도메인 주소); location / { proxy_pass http://localhost:3000; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection 'upgrade'; proxy_set_header Host $host; proxy_cache_bypass $http_upgrade; } }client에 apollo를 불러오는 코드입니다 import { ApolloClient, InMemoryCache } from "@apollo/client"; const link = "http://localhost:8000/graphql"; export const client = new ApolloClient({ uri: link, cache: new InMemoryCache(), ssrMode: typeof window === "undefined", });제어디가 문제일까요?? 제발 도와주세요 ㅠㅠㅠ

platanus · Accepted Answer

이 설정이 전부라면 nginx쪽에 SSL 인증서 설정을 하나도 안하신것 같습니다..https://okdevtv.com/mib/nginx맨 아래 보시면 ssl인증서 설정하는 부분이 있습니다. listen 443으로 시작해요.

오예예 · Answer

감사합니다! 알려주신대로 설정도 해봤지만 https 에서 http의 정보가 안가져와지는 것 같아요 ㅠㅠㅠ 서버를 https로 따로 빼야할 거 같은 느낌입니다 ㅠㅠ

seoys · Answer

ApolloServer 자체에 cors 옵션이 있습니다~express에서 cors설정한다음에 apolloServer에서 지정하시면됩니다.

오예예 · Answer

seoys // 감사합니다! 이런 옵션이 있는지 못 찾았어요! nginx로 https 끼리 통신하게 해서 해결했지만 다음에 활용하겠습니다! 감사합니다!

Apollo-server cors에서 https 차단 문제..제발 도와주세요..!ㅠㅠㅠㅠ

4개의 답변

Q&A 목록