質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Facebook Graph API

Facebook Graph APIとは Facebookのグラフデータベース用のAPIであり、対応言語はPHP、Perl、ActionScript、JavaScriptなどがあります。

Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

CORS

CORSとはCross-Origin Resource Sharingの頭文字をとったもので、ブラウザがオリジン以外のサーバからデータを取得するシステムのことです。

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

Q&A

解決済

2回答

1488閲覧

【Rails】 GraphQL APIのCORSエラー

hinokage

総合スコア7

Facebook Graph API

Facebook Graph APIとは Facebookのグラフデータベース用のAPIであり、対応言語はPHP、Perl、ActionScript、JavaScriptなどがあります。

Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

CORS

CORSとはCross-Origin Resource Sharingの頭文字をとったもので、ブラウザがオリジン以外のサーバからデータを取得するシステムのことです。

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

0グッド

0クリップ

投稿2020/03/16 10:03

編集2020/03/18 08:24

前提・実現したいこと

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 公式リファレンス
(トークンの取得やエンドポイント、ヘッダーについて参考にしました)

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

自己解決

修正した箇所

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

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

投稿2020/04/03 11:53

hinokage

総合スコア7

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

あいにく正しいプログラムを提示するほどの知識がないのですが、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を呼び出せばよいのではないでしょうか。

投稿2020/04/02 11:40

ockeghem

総合スコア11701

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hinokage

2020/04/03 11:56

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問