ぼくは掲示板をつくっており、それはクライアントサイドが Next.js で、サーバーサイドが Apollo Server という構成であった。また、動作確認は Firefox でおこなっていていた。
で、Apollo クライアントをつかってサーバーにリクエストを送ったところ、CORS エラーが発生したのだ。
なぜこの問題が起きたのか、結論から書くと、Firefox の使用で「HTTP リソースから HTTPS リソースへリクエストをおくったら CORS エラーが発生する」というものがあるからだった。
ぼくは、ウェブサイトに「http://localhost:3000」というオリジンでアクセスして、サーバーには「https://localhost:8000」というオリジンでアクセスしていた。
ということで、サーバーに「http://localhost:8000」というオリジンでアクセスするようにしたところ、CORS エラーは発生しなくなった。
const client = new ApolloClient({
// uri: "https://localhost:8000", 修正前
uri: "http://localhost:8000",
cache: new InMemoryCache(),
});
どうでもいい話
この問題を解決するために１日かかったんご。。。最初は、Apollo クライアントの HTTPLink の fetchOption をいじったり、Apollo Server の cors オプションをいじったりしてたんだけど、まったく解決しなくて萎えてたんご。。。
参考
↧
