【Rails】 GraphQL APIのCORSエラー

Question

前提・実現したいこと

Ruby on Railsでアプリケーションを製作しています。Rails初学者です。
作成しているアプリケーションで、Annict APIというGraphqlを用いたAPIのデータを取得したいと思い
アプリケーションにGem graphiql-rails,graphqlをインストール。
Graphiqlを用いてローカル環境でAPIにアクセスしようとするとCORSエラーが発生してしまう。
解決法を教えていただきたく宜しくお願いします

発生している問題・エラーメッセージ

Access to fetch at 'https://api.annict.com/graphql' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'.

POST https://api.annict.com/graphql net::ERR_FAILED

該当のソースコード

config/routes.rb

Rails.application.routes.draw do
  if Rails.env.development?
    mount GraphiQL::Rails::Engine, at: "/graphiql", graphql_path: "https://api.annict.com/graphql"
  end
  post "/graphql", to: "graphql#execute"
  ..........
end

config/initializers/graphiql.rb

GraphiQL::Rails.config.headers["Authorization"] = -> (context) { "Bearer アクセストークン" }

config/initializers/cors.rb

Rails.application.config.middleware.insert_before 0, Rack::Cors do
    allow do
        origins 'https://api.annict.com/'
        resource '*',
        headers: :any,
        methods: [:get, :post, :options],
        credentials: true
    end
end

試したこと

エラーの内容を読み、「CORSの設定が悪いのでは？」と考え、Gem rack-corsをインストール
自動で作成されなかったためcors.rbを作成し、originsの中身を'https://api.annict.com/'に,
credentialsをtrueにしたが状況は分からなかった

原因かも

・routes.rbの「graphql_path: 」の部分にエンドパスを記入するのが間違っているのか？
・「graphiql.rb」内のヘッダーの書き方が間違っているのか？

参考にしたもの

Annict API 公式リファレンス
（トークンの取得やエンドポイント、ヘッダーについて参考にしました)

Answer 1

修正した箇所

graphiql_show.js

document.addEventListener("DOMContentLoaded", function(event) {
..........
// Defines a GraphQL fetcher using the fetch API.
  var graphQLEndpoint = graphiqlContainer.dataset.graphqlEndpointPath;
  function graphQLFetcher(graphQLParams) {
    return fetch(graphQLEndpoint, {
      method: 'post',
      headers: JSON.parse(graphiqlContainer.dataset.headers),
      body: JSON.stringify(graphQLParams),
      credentials: 'include',

..........

credentials: 'include'をcredentials: 'same-origin'に変更したら
エラーも発生せず、リクエストも通りました。

知識がなくて推測になってしまうのですが、
何らかの原因でGem rack-corsが動作せず
graphiqlそもそもの設定ファイルであるgraphiql_show.jsを修正しないと
CORSエラーが解決できなかったのではないかと思います。

参考にしたサイトを載せておきます。
CORS does not allow * wildcard with current apollo graphiql implementation

解決に協力していただいた皆さんありがとうございました。

Answer 2

あいにく正しいプログラムを提示するほどの知識がないのですが、CORSのエラーというのは表面的なことで、やり方が根本的におかしいのだと思います。

まず、表示されているエラーメッセージからわかることとして、http://localhost:3000 におかれたページから、JavaScrpitのFetch APIを用いて、エンドポイント https://api.annict.com/graphql にアクセスしようとしています。この際に、認証情報も付与されているので、APIエンドポイント側で与えられているAccess-Control-Allow-Origin: * ではだめで、明示的に Access-Control-Allow-Origin: http://localhost:3000 を指定する必要があるというエラーです。この Access-Control-Allow-Origin ヘッダを生成するのは、あなたが作成したアプリケーション側ではなくて、API側です。常識的に考えて、APIエンドポイント側がオリジン http://localhost:3000 に明示的な許可を出すということは考えにくいと思います。

そもそも、JavaScriptのFetch APIを用いる必要がないと思います。なので、JavaScript経由ではなく、Ruby on RailsからダイレクトにAPIを呼び出せばよいのではないでしょうか。

Comments

[hinokage]

ご回答ありがとうございます。
回答していただいた内容を自分で調べながら、試行錯誤してみた結果
全く関係ないところをいじった結果、自己解決できてしまいました。
自分自身CORS関係やAPI関係の知識が少なかった結果のものだったので
もう少し上記の分野の学習の方を頑張ろうと思います。
今回は私の稚拙な質問への回答、本当にありがとうございました。