フロント（今回は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