0
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

[Rails6.0 + Nuxt.js] response.headersにcorsのexpose(access-tokenなど)が入らない

Last updated at Posted at 2020-04-09

この記事を書くにいたるまで

現在Rails6.0とNuxt.jsを使って適当にアプリを作っています。(Nuxtの練習です
RailsはAPIモード、認証にはdevise_token_authを使用しており、
Nuxtからaxios経由でpostしてtoken認証を行うアプリになっています。

今回loginをaxiosで行ったのですが、そのresponse(response.headers)の中に
access-tokenclientなどが格納されていないというトラブルが発生しました。
解決すると「こんなことで…」と思いますが、ほぼ1日ハマってしまったので共有です。

ぶつかった壁

まずnuxt側ですが、以下のようにloginアクションを実装しています。

login.vue
  async login(vuexContext, data) {
    await this.$axios.post("/api/v1/auth/sign_in", data)
      .then(response => {
        console.log(response.headers)
      })
      .catch(e => {
        console.log(e)
      })
  }

次にrails側ですが、CORS対策としてはrack-corsを導入しています。
以下corsの設定です。

config/application.rb
Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins 'localhost:3001'

    resource '*',
      headers: :any,
      methods: [:get, :post, :put, :patch, :delete, :options, :head],
      expose: ['access-token', 'expiry', 'client']
  end
end

exposeに'access-token', 'expiry', 'client'を記述しています。
通常だとこれでresponse.headers内に上記3つの結果が表示されるはずです。

しかし以下のような結果しか表示されませんでした。

console.log(response.headers)
headers:
  cache-control: "max-age=0, private, must-revalidate"
  content-type: "application/json; charset=utf-8"

chrome-devtools => [Network] => Response Headersを見たところ、
こちらにはaccess-tokenの情報が来ているのですが、
responseというオブジェクトから取り出すことができません。

解決策

調べたところ、rack-corsのissuesにたどり着きました。
するとどうやらRack::Corsという設定が重複しているようです。

念のためgit grep Rackを実行したところ、なんとconfig/initializers/cors.rbが見つかり
そこに同じ設定がありました…(それまでconfig/application.rbに書いていました)

コメントアウトされていたので重複はしていないはずですが、
そもそもの設定を書く場所が間違っていたことになります。

設定をconfig/initializers/cors.rbに移行し再ログインしたところ、
うまくheadersに反映されました。

config/initializers/cors.rb
Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins 'localhost:3001'

    resource '*',
      headers: :any,
      methods: [:get, :post, :put, :patch, :delete, :options, :head],
      expose: ['access-token', 'expiry', 'client']
  end
end

結果

console.log(response.headers)
headers:
  access-token: "VPPrzn2DnJuqJi_uDEI4hg"
  cache-control: "max-age=0, private, must-revalidate"
  client: "TVmLwY1GM23koi9r9HY17g"
  content-type: "application/json; charset=utf-8"
  expiry: "1587634926"

おわり

0
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?