学習方法

メンター情報

料金

対応時間帯

返信スピード

学習方法

メンター情報

料金

対応時間帯

返信スピード

募集をシェアしてメンターを探そう
シェア

※ この募集は締め切られました。

プログラミング RubyonRails Vue.js Nuxt.js

rails × nuxt.jsのcors周りのエラーを解決したい

2022年6月22日
単発
予算
3,000円 〜 5,000円
提案数
1人が提案中
応募期限
終了

【概要】
Nuxt.jsとRailsでwebアプリを作成しています。
JWTを用いたログイン認証を実装しているのですが、corsの設定でうまくいかない箇所があるのでご教授願えればと思います。


【目的】
nuxt側からログインリクエストを送り、ブラウザのクッキーにリフレッシュトークンを保存させたい。

【エラー詳細】
現在フロントからログイン処理を叩くとtokeやuserオブジェクトが返ってくるところまでは成功しています。

ログイン状態を保持するために、refresh tokenをクッキーに保存する以下の設定をしました。

```
cors.rb

Rails.application.config.middleware.insert_before 0, Rack::Cors do
allow do
origins 'http://localhost:8080' || ''
# origins '*'

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

// 追加
credentials: true
end
end


nuxt.config.js
```
axios: {
baseURL: 'http://localhost:3000',

// 追加
credentials: true,
},
```

その上であらためてリクエストを送ると、
```
Access to XMLHttpRequest at 'http://localhost:3000/api/v1/auth_token' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Credentials' header in the response is '' which must be 'true' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.
```
となります。


下記サイトなどを参考にしてみたのですがうまくいきませんでした。
https://www.tech-blog.startup-technology.com/2019/rails_nuxt/

詳しい方がいればお助けいただきたいです。よろしくおねがいします。


開発環境:ローカル
MacOS Monterey 12.2.1

【コミュニケーション方法】
チャットとビデオ通話どちらでも可

募集をシェアしてメンターを探そう
シェア