フロント(今回はNuxt.js)から、Railsアプリ(Devise Token Auth)に対して、APIリクエストを投げる実装中に対応した内容をメモしておきます。

CORS(Cross-Origin Resource Sharing):オリジン間でリソース共有を可能にする仕組み
OPTIONS(preflight)リクエスト:GET/POST/DELETEリクエストを投げる前の存在チェック
Access-Control-Expose-Headers:ここで許可したレスポンスヘッダしかフロントは取得できない

CORS設定(Railsアプリ)

GitHub – cyu/rack-cors: Rack Middleware for handling Cross-Origin Resource Sharing (CORS), which makes cross-origin AJAX possible.

Gemfile に追加

gem 'rack-cors'
$ bundle install

config/initializers/cors.rb を作成

Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins '*'
    resource '*', headers: :any, methods: %i[get post patch put delete options head], expose: %i[token-type uid client access-token expiry]
  end
end

origins:今回は公開APIなので、*を設定
methods:通常使っている「get post patch put delete」以外に「options head」も設定
expose:今回はDevise Token Authで使う「uid client access-token expiry」を設定

Nuxt.jsで、undefinedになっていたのが取得できるようになりました。

console.log(response.headers['access-token'])

ちなみに、token-typeは指定してもundefinedになってしまったが、おそらく@nuxtjs/auth側の処理が影響してそう。
使用しないので、exposeの設定も外しました。

ただのtypoだった。%i[・・・token-type’] → %i[・・・token-type]

参考:Response headers missing · Issue #606 · axios/axios · GitHub


今回のコミット内容
https://dev.azure.com/nightonly/rails-app-origin/_git/rails-app-origin/commit/7a382240c61015bce2bda079de97b80d8d21c59c

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です