herokuデプロイ後のバックエンドの呼び出し

Question

実現したいこと

現在、バックエンドをrails(docker環境),フロントエンドをReactにてアプリの開発を行なっています。

フロント、バックエンド共に、herokuへのデプロイは完了したのですが、
フロント側から、バックエンドへの通信がうまくいきません。

Rails、Reactは別フォルダーで作成しています。
├── バックエンド
├── フロントエンド

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

上記画像のようなエラーが出てしまい、バックエンド側とうまく接続できていないようです。

バックエンドで呼び出す際のURLをherokuのURLにしてみましたがレスポンス404と出てきてしまい、うまくいきませんでした。

どなたか力添えお願いします。

app/controllers
├── api
│   └── v1
│   ├── auth
│   │   ├── registrations_controller.rb
│   │   └── sessions_controller.rb
│   ├── englishlists_controller.rb
│   ├── lists_controller.rb
│   ├── test_controller.rb
│   └── users_controller.rb
├── application_controller.rb

Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins 'localhost:3000','https://englist-f.herokuapp.com'
    resource '*',
      headers: :any,
      expose: ["access-token", "expiry", "token-type", "uid", "client"],
      methods: [:get, :post, :put, :patch, :delete, :options, :head]
  end
end

const client = applyCaseMiddleware(
    axios.create({
      baseURL:"http://localhost:3001/api/v1"
}), options)

export default client

参考サイト
(https://medium.com/@bruno_boehm/reactjs-ruby-on-rails-api-heroku-app-2645c93f0814)
(https://qiita.com/mayutakino/items/446512b12b84a07d3f4b)
(https://blap.blog/?p=863#toc13)

Answer 1

localhost にせつぞくしようとしています。
この localhost とは ブラウザーからみてlocalhostですから、ブラウザーを動かしている PCのことです。
ですからつながらないのです。
「バックエンドで呼び出す際のURLをherokuのURLにしてみましたが」 は正しい措置ですが、「レスポンス404」ということは
接続はできたが、該当するURLがない、ということですので、
バックエンドのlogを見てなにが起きているのか確認するのが最初のstepです、

Comments

[mymt658]

ご回答ありがとうございました。
バックエンド側のherokuのURL＋コントローラーのpathを指定することで解決することができました。