react Uncaught (in promise) TypeError: Failed to fetchエラー

publicホストでアクセスすると正常にアクセスできますが、privateホストの場合「Uncaught (in promise) TypeError: Failed to fetch」
というエラーが発生してます。

apiはrails,frontはreactにしてdocker-composeで環境を構築しました。
curlだと正常にAPIの値を取得してます。

curl --dump-header -  http://global_ip:3000/api/items
curl --dump-header -  http://api:3000/api/items

両方とも同じ結果が返ってきます。

HTTP/1.1 200 OK
X-Frame-Options: SAMEORIGIN
X-XSS-Protection: 1; mode=block
X-Content-Type-Options: nosniff
X-Download-Options: noopen
X-Permitted-Cross-Domain-Policies: none
Referrer-Policy: strict-origin-when-cross-origin
Content-Type: application/json; charset=utf-8
ETag: W/"af1a2fef323ce42a5d1a2eca8f138401"
Cache-Control: max-age=0, private, must-revalidate
X-Request-Id: 50951af8-a409-4b50-8ece-f18b42f03a41
X-Runtime: 0.012786
Vary: Origin
Transfer-Encoding: chunked

[{"id":1,"title":"testest"}]

front(react)のfetch設定

    componentDidMount(){
      fetch('http://global_ip:3000/api/items') //<<--success
      fetch('http://api:3000/api/items', {  //<<--faild
        method: "GET",
        headers: {
            "Access-Control-Allow-Origin": "*",
            "Content-Type": "application/json"
        }
        })
         .then(response => response.json())
         .then(data => this.setState({ items: data }));

    }
    render(){
       return(
          {console.log("!!!!!!!!!!!!! state items:",this.state.items)} //<<<ここでエラー発生
       )
    }

api(rails 5.2.1)
apiのcors設定は全体許可してます。

config/initializers/cors.rb

Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins "*"

    resource "*",
      headers: :any,
      methods: [:get, :post, :put, :patch, :delete, :options, :head]
  end
end

こちらのエラーを解消するに何か良い方法がありましたらご教示いただけますでしょうか。

よろしくお願いします。

行動規範の内容に同意します

回答1件

ベストアンサー

reactを実行しているブラウザのドメインの記載があると良いと思いますー。

以下の設定が OPTIONSメソッドでリクエストしたときにレスポンスヘッダーに設定が必要です。

curl -X OPTIONS --head http://global_ip:3000/api/items
curl -X OPTIONS --head http://api:3000/api/items

ヘッダーの内容を確認して、
CORSの設定が正しくできているか確認してみてください。

Access-Control-Request-Headers: Content-Type
Access-Control-Allow-Origin: react(ブラウザ)が実行されているorigin or *
Access-Control-Allow-Methods: GET 他のメソッド
Access-Control-Allow-Credentials: true クッキーを使っている場合は必要

CURLで実行できているということは、
ブラウザの外部ドメインへの制約かと思うので、
config/initializers/cors.rb をいじりつつ
OPTIONSが正しく設定されているか確認しながら進めると早いと思います。

参考
https://qiita.com/tomoyukilabs/items/81698edd5812ff6acb34

投稿2018/11/27 14:51