実現したいこと
現在、バックエンドを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
cors.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
API呼び出し
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)
