Ruby on RailsとVue.js間でのCORS対応の仕方

Question

別ドメイン上に存在するvue.jsとRailsを利用し、WEBアプリケーションを開発しており、Googleログインの機能実装しています。全体としては、以下の流れでの処理を想定しています。
（Googleログインの機能はomniauthを利用しています。）

1. フロント側（vue.js）からGoogleボタンを押下してRailsにリクエスト
2. RailsからGoogleのoauth2のAPIにリクエスト
3. Googleのoauth2にて認証処理
4. Google API Consoleで指定されたrailsにCall backし、レスポンスの内容を処理
5. vue.js側でレスポンスに合わせて処理

Rails側のAPIは完成しており、フロント側とのつなぎ込みを行っています。
しかし、「1」でGoogle sign in」ボタンを押下したタイミングで以下のエラーが発生し、先に進めません。

Access to XMLHttpRequest at 'https://accounts.google.com/o/oauth2/auth?access_type=offline&client_id=00000000000-ajshfashashfkahfahflahfjaafja.apps.googleusercontent.com&redirect_uri=http%3A%2F%2F180.160.41.51%2Fxxxx%2Fxxxx%2Fxxxx2%2Fcallback&response_type=code&scope=https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fuserinfo.email+https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fuserinfo.profile+https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fcalendar&state=f5q7877089gsdg6s0g76dsg7d6sgs6gsg9d' (redirected from 'http://180.160.41.51/xxxx/xxxx/google_oauth2?current_member_id=1') from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

同様の状況での問題としては、この記事があり、参考にしています。

ただ、rails側のconfigファイルにはすでに以下のような記述がされており、一見するとどこにも問題がない状況なような気がして詰まっています。

config.action_dispatch.default_headers = {
      'Access-Control-Allow-Credentials' => 'true',
      'Access-Control-Allow-Origin' => 'http://localhost:8080', # アクセス元のURL
      'Access-Control-Request-Method' => '*' # 許可するメソッド（GET,POST,DELETEなど）：'*'は全てのメソッドという意味
    }

この問題に対して、何か解決の糸口になるようなアイデアがある方、同様の問題を解決したことがある方がいらっしゃいましたら、是非ともご回答を頂けますでしょうか。
（具体的なアドバイスでなくても、ヒントになるようなことでも構いません）

Comments

[urbainleverrier]

XMLHttpRequestを使って通信しようとしていますね。上記のエラーは、railsのresponse、403リダイレクトを実行しようとしている結果ということで良いでしょうか。
エラーメッセージは、localhost:8080内でaccounts.google.comにアクセスしようとするのがいけないということなのか、そもそもrequestするときにoriginのヘッダたなぜか貼られていないということなのか、どちらなのかわかりますか。
解決策として、xmlhttprequestではなくて、単純にページ全体でrequestするというのではダメですか。

[mory]

本件、自己解決致しました。
Google Chromeの特有の問題のようでした。

Answer 1

どうやらこのXMLHttpRequest関連のエラーが発生するのはブラウザのChrome特有の問題であるようです。
コマンドラインから、Chromeのセキュリティーをdisableして起動すると、このエラーは起こらなくなりました。

open /Applications/Google\ Chrome.app/ --args --disable-web-security --user-data-dir

この件については、以下の記事にまとめられています。
https://qiita.com/growsic/items/a919a7e2a665557d9cf4