rails api のcors設定 覚書

Rails Api での CORS設定　ー覚書ー

フロントエンドをNuxt.jsで作り、そこからRailsのAPIを叩く際の覚書

　フロントエンドをNuxtで書いて、Railsで作ったAPIへFetchAPIでPOST送信する際の手順の覚書です。
今回はFetchAPIを使っていますが、Axiosでも同じです。

リクエストのヘッダ情報の中で、credentials: 'include' にした時に、エラーメッセージで,「credentials: 'include'の時はAccess-Control-Allow-Originはワイルドカードにしちゃ駄目!!」と言われた事に対する対処の覚え書きです。

###　Nuxt側のコード

store/hoge.js

export const actions = {

// ー中略ー

actions:{

  async hogehoge ({ commit }) {
    // POST送信で送りたいオブジェクト
    let searchInfo = {
      mode: "new",
      piyopiyo : 9,
      message : "hello",
    }
　　//　開発環境でLocalで動かしているRailAPIアプリのアドレス
    let url = "http://localhost:3000/api/v1/searches"
    let json = fetch(url, {
      mode: 'cors',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      },
      credentials: 'include',
      method: 'POST',
      body: JSON.stringify(searchInfo)
    })
    Promise.resolve(json)
      .then(result => {
        return result.json();
      })
      .then(response => {
        commit('setProducts', response)
      })
      .catch(error => console.log(error));
  }
}

rack-cors の利用

Gemfile

gem 'rack-cors'

$ bundle install

bundle install すると自動的にcors.rbファイルが作成される。

corsの設定

config/initializers/cors.rb

Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    # Nuxtの開発用ローカルサーバーのアドレスを指定する。
    origins 'http://localhost:3333'

    resource '*',
      headers: :any,
      methods: [:get, :post, :put, :patch, :delete, :options, :head],
      credentials: true
  end
end

originの指定を * にすると全てを許容する事になるが、リクエスト側でcredentials: 'include'を指定している時は、
*にするとエラーとなる為きちんと指定する必要がある。

リクエストにクッキーを含める際は、credentials:'includeに設定しなくてはならないので、*ではダメでした。

まとめ

CORSについては今まで何でもかんでもOriginsを*にしていたり、POST送信を使わず、無理やり　Get送信にパラメターで送りたい情報を持たせていた為、理解が不足していました。さらに、掘り下げて学習していきます。

また、今回の対処方法では、本番環境と開発環境を行き来するたびにフロントエンド側もAPI側もアドレスを書き換えなくてはならないので、環境に応じて、切り替えれるようにしたいです。