React,Railsでのエラー 「has been blocked by CORS policy: Response to preflight request doesn’t pass acces」

Question

RailsとReactでSPAを作成しようとしているのですが、
ログイン周りの実装にについてハマっています。

一度Railsのdevise単体でのログイン処理が行えるように準備し、同じpathにReactからPOSTしてみたのですが。

ブラウザのコンソールに、

Access to fetch at ‘http://localhost:3000/users/sign_in’ from origin ‘http://localhost:8000’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.

こちらのエラーで、
Railsのサーバには、

api_1 | Started OPTIONS “/users/sign_in” for 172.23.0.1 at 2020-07-03 08:02:07 +0000

api_1 |
api_1 | AbstractController::ActionNotFound (The action ‘options’ could not be found for ApplicationController):

こちらのエラーが出ています。

検索し、

https://qiita.com/shimpeiws/items/0cd53ac9da3a7fd645b9

こちらの記事を参考に、

config/routes.rbに

match '*path' => 'options_request#preflight', via: :options

を追加し、

app/controllers/options_request_controller.rbにも

class OptionsRequestController < ApplicationController
  ACCESS_CONTROL_ALLOW_METHODS = %w(GET OPTIONS).freeze
  ACCESS_CONTROL_ALLOW_HEADERS = %w(Accept Origin Content-Type Authorization).freeze
  def preflight
    set_preflight_headers!
    head :ok
  end
  private
  def set_preflight_headers!
    response.headers['Access-Control-Max-Age'] = ACCESS_CONTROL_MAX_AGE
    response.headers['Access-Control-Allow-Headers'] = ACCESS_CONTROL_ALLOW_HEADERS.join(',')
    response.headers['Access-Control-Allow-Methods'] = ACCESS_CONTROL_ALLOW_METHODS.join(',')
  end
end

こちらを追加しました。

しかし、エラーは変わりませんでした。

この場合に次に同対処すればいいか、アドバイス頂けると嬉しいです。
よろしくお願い致します。

17:08
よろしくお願い致します。

Answer 1

つい先日同じようなエラーにつまづいたので解決になればと思い投稿いたします。
CORS自体はまだ自分も理解しきれていないのですが、見た所ローカルでの接続ができていないようなので、単純にローカル内での接続ができればいいのであれば[こちらの記事]に記載されているchromeの拡張機能を有効化して試すとうまく行くかもしれません。(https://developer.yukimonkey.com/article/20200227/)