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

みなさんこんにちは！
今回が2回目の投稿になります．学生エンジニアのタクマです．
初心者故に誤った情報や不適切な表現が多々あると思います．お手数ではございますが，都度ご指摘いただけると大変嬉しいです．

さて，今回取り上げる内容は，フロントエンドとバックエンドを完全に切り離したい方や，SPA(シングルページアプリケーション）に興味がある方が開発を進める上でぶち当たるのではないかという壁の紹介と乗り越え方を書いていこうと思います．

今回取り上げる内容は，CORS対策です．Webブラウザには他のドメインからアクセスを拒否するという仕様(同一生成元ポリシー)があり，例えばhttp://localhost:3000 にhttp://localhost:8080 などからGETやPOSTのリクエストを投げてもエラーになってしまいます．今回はRailsとVue.js間の通信を例に取って解決法をメモしておこうと思います．

今回のケース

http://localhost:3000/labs/1 には以下のようなJsonデータが置いてある（Ruby on Railsによって実現)

lab.json

{
    "id": 1,
    "name": "〇〇研",
    "prefecture": "愛知県",
    "overview": "〇〇"
  }

このJsonデータをhttp://localhost:8080/lab からaxiosを使用して非同期に読み込む

実装したコード（※抜粋）

バックエンド側はCORS対応の部分だけ抜粋してお伝えしますので，データベース等とのやり取りは割愛します．
私自身何時間もCORS対応ができなくて悩んでいまししたが，実はたった数行程度文字列を追加するだけで対応可能です！！

config/application.rb

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など）：'*'は全てのメソッドという意味
    }

この文言をRuby on Rails側のapplication.rbというファイルにコピペするだけでOKです．

フロントエンド側のコードも示しておきます．axiosの使い方などもご確認ください．

jsonGet.js


var GET_URL = "http://localhost:3000/labs/1";

  export default {
    el: '#lab',
    name: 'lab',
    data() {
      return {
        json_data: '',
        name: '',
        prefecture: '',
        overview: '',
      }
    },
    created() {
      axios.get(GET_URL)
        .then(response => {
          this.json_data = response.data;
          this.name = response.data.name;
          this.prefecture = response.data.prefecture;
          this.overview = response.data.overview;
        }).catch(err => {
        console.log('err:', err);
      });