teratail
回答率
85.30%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問API単体だとクッキーが作れるがクロスオリジンだとcookieが作られない。

編集履歴

質問編集履歴

4

大幅変更

2021/06/09 04:43

投稿

yaha4967
yaha4967

スコア106

title CHANGED
@@ -1,1 +1,1 @@
1
- Rails API + React でcookieが作られない
1
+ API単体だとクッキーが作れるがクロスオリジンだとcookieが作られない。
body CHANGED
@@ -1,12 +1,5 @@
1
- ```ここに言語を入力
2
- コード
1
+ # 現状
3
- ```何かヒントでもいただければ幸いと思います！よろしくお願いします！
4
2
 
5
- # したいこと
6
- 最終的には、クッキーを利用することでログインなしにいいね が押せるようにしたいです！
7
- 具体的にはクッキーに 「いいねするidに&をつけた文字列」を入れます。そして取り出したいときにsplit("&")で配列として扱おうと考えております。
8
-
9
- # 環境
10
3
  Dockerでrails, node, Nginx, MySQLのイメージをビルドして動かしてます
11
4
  ruby 2.73
12
5
  rails 6.1.3.2
@@ -15,82 +8,96 @@
15
8
  です。フロントはnom create-react-appで作りました。
16
9
 
17
10
 
11
+ railsのエンドポイントにブラウザから直接アクセスするとクッキーの保存を確認できます。しかしフロントからアクセスするとクッキーが作られないです。一応、フロントからアクセスした場合もそのrailsのアクション内ではクッキーを確認できます。
18
12
 
19
- # 現状
20
- クッキーが普通の変数のように一時しか値を保持しないです。
21
13
 
22
- 例えばクッキーコントローラのcreateアクションにreactからアクセスすると、クッキーは「puts cookies[:key]」で確認できます。jsonで返すことも出来てdeveloperツールのコンソールで確認できます。ですがアクションを跨ぐとクッキーがなくなってしまいます。
14
+ ### 実現したいこと
23
15
 
24
- フロントはhttp://localhost:8000でアクセスした
16
+ クロスオリジンでもcookieが作られるようにしたいです。
25
- バックエンドにはhttp://localhost:3000/api/v1でアクセスするようにしています。
26
17
 
27
- Rspecではrequest specで「クッキーに値を入れる→クッキーの中身を返す→クッキーに追加で値を入れる→クッキーの中身を返す」というテストを作っているのですがそれは通っています。
18
+ ### 発生している問題・エラーメッセージ
28
19
 
20
+ エラー等は見当たらないです。
29
21
 
22
+
30
- # developerツールの状態
23
+ ### 該当のヘッダー
31
- developerツールのストレージ>cookieには以下の一つだけあります。セッションストレージ、ローカルストレージは空です。
24
+
32
25
  ```
33
- 名前:__profilin
34
- 値:p%3Dt
35
- Domain:localhost
36
- Path:/
37
- Session:チェック
38
- HttpOnly:チェック
39
- Secure:チェックなし
40
- SameSite: Lax
26
+ Ggeneral
41
- ```
42
27
 
28
+ Request URL: http://localhost:3000/cookies
29
+ Request Method: POST
30
+ Status Code: 200 OK
31
+ Remote Address: [::1]:3000
43
- createアクション時(一応クッキーは作れる)のヘッダがこのような形です。
32
+ Referrer Policy: strict-origin-when-cross-origin
44
33
  ```
45
- リクエスト
46
- POST /api/v1/cookies HTTP/1.1
47
- Accept: application/json, text/plain, */*
48
- Content-Type: application/json;charset=utf-8
49
- Origin: http://localhost:8000
50
- Content-Length: 66
51
- Accept-Language: ja-jp
52
- Host: localhost:3000
53
- User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0.3 Safari/605.1.15
54
- Referer: http://localhost:8000/%E3%82%A6%E3%82%A3%E3%83%A1%E3%83%B3%E3%82%BA%E3%83%95%E3%82%A1%E3%83%83%E3%82%B7%E3%83%A7%E3%83%B3/%E3%83%90%E3%83%83%E3%82%B0/%E3%81%99%E3%81%B9%E3%81%A6%E3%81%AE%E3%83%90%E3%83%83%E3%82%B0
55
- Accept-Encoding: gzip, deflate
56
- Connection: keep-alive
34
+ ```
35
+ Response Headers
57
36
 
58
- レスポンス
59
- HTTP/1.1 200 OK
37
+ Access-Control-Allow-Credentials: true
60
38
  Access-Control-Allow-Methods: GET, POST, PUT, PATCH, DELETE, OPTIONS, HEAD
61
- Set-Cookie: __profilin=p%3Dt; path=/; HttpOnly; SameSite=Lax
62
- Set-Cookie: heart=1%26; path=/; expires=Sat, 08 Jun 2041 16:09:00 GMT; SameSite=None
63
- Cache-Control: no-store, must-revalidate, private, max-age=0
64
39
  Access-Control-Allow-Origin: http://localhost:8000
65
- Referrer-Policy: strict-origin-when-cross-origin
66
- X-XSS-Protection: 1; mode=block
67
- Vary: Origin
68
- Transfer-Encoding: Identity
69
40
  Access-Control-Expose-Headers
70
- X-Frame-Options: SAMEORIGIN
71
41
  Access-Control-Max-Age: 7200
72
- Access-Control-Allow-Credentials: true
42
+ Cache-Control: no-store, must-revalidate, private, max-age=0
73
43
  Content-Type: application/json; charset=utf-8
44
+ Referrer-Policy: strict-origin-when-cross-origin
45
+ Set-Cookie: heart=2%26; path=/; expires=Sun, 09 Jun 2041 04:12:28 GMT; SameSite=Lax
46
+ Set-Cookie: _session_id=eqber0r2mSXHDgWyjx6qDkPvTU5eHyx9Y5p6%2B3XfofVBeLu%2Bur8deAKg5Dnpz%2BJfsMLBebrPLe5nevkLq%2FOeW6frBwOKwv11pVs7xXxRhvYHuU0FSxgQeGsVF7H9P0z%2BPMDFTQIWCWg191smFB4oXiG2c%2F%2BU0uHArmkUCCP7bba6bWuLStfVbvj0Lpq4mFxItVh1--yvc9LfUInUeOz178--G0Rcb%2BW0LRcW2QmlVgCb0g%3D%3D; path=/; HttpOnly; SameSite=Lax
47
+ Set-Cookie: heart=2%26; path=/; expires=Sun, 09 Jun 2041 04:12:28 GMT; SameSite=Lax
48
+ Set-Cookie: _session_id=eqber0r2mSXHDgWyjx6qDkPvTU5eHyx9Y5p6%2B3XfofVBeLu%2Bur8deAKg5Dnpz%2BJfsMLBebrPLe5nevkLq%2FOeW6frBwOKwv11pVs7xXxRhvYHuU0FSxgQeGsVF7H9P0z%2BPMDFTQIWCWg191smFB4oXiG2c%2F%2BU0uHArmkUCCP7bba6bWuLStfVbvj0Lpq4mFxItVh1--yvc9LfUInUeOz178--G0Rcb%2BW0LRcW2QmlVgCb0g%3D%3D; path=/; HttpOnly; SameSite=Lax
49
+ Set-Cookie: _dhioru=%2FAC394e5nlSWf0o%2FcS5DDLzzSBv3I6GKrKG9G%2Fw20oPCTYucAjN5jtDWS5SzAq%2BiL1LWP0qATqZZxQnzGEG6A8fbYo0z6FwP7UlRqGjPePbBPKwrgZVc2nCb2hhzLV8mYqYAR3kkIUOVNdfbvfS%2FO%2Fi3xjhmN%2BQlGKJkpKxMuU30KfjTcnLB8GKgQ%2F%2B4w0M%3D--6s0zMVohGU8aJIH3--npW7DH1Qs1q%2FhCfH8wYlkA%3D%3D; path=/; HttpOnly; SameSite=Lax
50
+ Set-Cookie: __profilin=p%3Dt; path=/; HttpOnly; SameSite=Lax
51
+ Transfer-Encoding: chunked
52
+ Vary: Origin
74
53
  X-Content-Type-Options: nosniff
75
- X-MiniProfiler-Ids: ba36riy0nqdflzxs3g42,hzudd10mt3jd2qgzufqq
76
- X-Runtime: 0.102722
77
54
  X-Download-Options: noopen
78
- X-Request-Id: e904a793-583c-4293-a5a1-f9d48038cb2a
55
+ X-Frame-Options: SAMEORIGIN
56
+ X-MiniProfiler-Ids: cy6hsc79m5um98f7z26v,7ryg1st8v8x5mpcses89,jhf9f4zzwazmol5v26dp,feccdjrkb842z6nzree1,ut2yjs3y88q9oqomr6sf,qodriy5b4fbap77ypz6q,bpaxart9p4e9j62bq1n0,a5g8ut8jhr1jspmzec32,vweyw089i0m78uel0m0y,q9i0pmnwqjjq9oib7xg4,ewliul8kc9lde7bfi9ev,i7amrery7gnj7xak7hmk,f9tc6mkzxvqdl2qs5dyi,zm4he213u4hfyimd5s4w,r98i638tjhss8clieagx,qklf0djz0bke0geeatdg,4g20tlm6dr6wdk5n61hd,bhczl2at7vd9l4yb292c,slreeaz6j6kumfrmtmbt,qyrzzi6k87msvemblx1e
79
57
  X-MiniProfiler-Original-Cache-Control: max-age=0, private, must-revalidate
80
58
  X-Permitted-Cross-Domain-Policies: none
59
+ X-Request-Id: 7a13e18f-5553-4332-9d11-1216da708fa5
60
+ X-Runtime: 0.089528
61
+ X-XSS-Protection: 1; mode=block
81
62
  ```
63
+ ```
64
+ Request Headers
82
65
 
66
+ Accept: application/json, text/plain, */*
67
+ Accept-Encoding: gzip, deflate, br
68
+ Accept-Language: ja,en-US;q=0.9,en;q=0.8
69
+ Connection: keep-alive
70
+ Content-Length: 66
71
+ Content-Type: application/json;charset=UTF-8
72
+ Host: localhost:3000
73
+ Origin: http://localhost:8000
74
+ Referer: http://localhost:8000/
75
+ sec-ch-ua: " Not;A Brand";v="99", "Google Chrome";v="91", "Chromium";v="91"
76
+ sec-ch-ua-mobile: ?0
77
+ Sec-Fetch-Dest: empty
78
+ Sec-Fetch-Mode: cors
79
+ Sec-Fetch-Site: same-site
80
+ User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.77 Safari/537.36
81
+ ```
82
+ ```
83
+ Request Payload
83
84
 
85
+ {withCredentials: true, item_id: 2, type: "heart", size_id: null}
84
- #私が気になってる部分
86
+ item_id: 2
87
+ size_id: null
88
+ type: "heart"
89
+ withCredentials: true
90
+ ```
85
91
 
86
- ・DockerによってIPアドレスが変わってる？
87
- apiのログで
92
+ ### 試したこと
88
- 「Cannot render console from <IPアドレス>!」
89
- と出たことが気になります。一応、このエラー自体は[こちらのqiita](https://qiita.com/terufumi1122/items/73da039e6fc90ee0a63f)通りにして消せたのですが。
90
- ・railsコンソールでクッキーが使えない
91
- dockerコンテナを作ったあとrailsのコンテナに入りrailsコンソールでクッキーを使用しようとするとundefined local variabl or method 'cookies'となってしまいます。
92
93
 
94
+ ・rack-corsの設定
95
+ ・same_sate_protectionをlax、secureをfalseにする
96
+ ・クッキーのミドルウェアを入れる
97
+ ・api_onlyをfalseにする
98
+ ・include ActionController::Cookies
99
+ ・front側のリクエストにwithCredentialsを入れる
93
100
 
94
- すべての設定やファイルを載せてしまうとかなり長文になってしまうので私なりに関係ないと思われるとことは省きました。もし、他に必要な情報がありましたら教えていただきたいです！
95
101
 
102
+
96
- ご教示お願い致します
103
+ 何かヒントだけても下されば幸いです。

3

追記

2021/06/09 04:43

投稿

yaha4967
yaha4967

スコア106

title CHANGED
File without changes
body CHANGED
@@ -87,9 +87,10 @@
87
87
  apiのログで
88
88
  「Cannot render console from <IPアドレス>!」
89
89
  と出たことが気になります。一応、このエラー自体は[こちらのqiita](https://qiita.com/terufumi1122/items/73da039e6fc90ee0a63f)通りにして消せたのですが。
90
+ ・railsコンソールでクッキーが使えない
91
+ dockerコンテナを作ったあとrailsのコンテナに入りrailsコンソールでクッキーを使用しようとするとundefined local variabl or method 'cookies'となってしまいます。
90
92
 
91
93
 
92
-
93
94
  すべての設定やファイルを載せてしまうとかなり長文になってしまうので私なりに関係ないと思われるとことは省きました。もし、他に必要な情報がありましたら教えていただきたいです！
94
95
 
95
96
  ご教示お願い致します

2

2021/06/09 01:04

投稿

yaha4967
yaha4967

スコア106

title CHANGED
File without changes
body CHANGED
File without changes

1

2021/06/08 17:06

投稿

yaha4967
yaha4967

スコア106

title CHANGED
File without changes
body CHANGED
@@ -1,4 +1,6 @@
1
+ ```ここに言語を入力
2
+ コード
1
- 何かヒントでもいただければ幸いと思います！よろしくお願いします！
3
+ ```何かヒントでもいただければ幸いと思います！よろしくお願いします！
2
4
 
3
5
  # したいこと
4
6
  最終的には、クッキーを利用することでログインなしにいいね が押せるようにしたいです！
@@ -79,6 +81,15 @@
79
81
  ```
80
82
 
81
83
 
84
+ #私が気になってる部分
85
+
86
+ ・DockerによってIPアドレスが変わってる？
87
+ apiのログで
88
+ 「Cannot render console from <IPアドレス>!」
89
+ と出たことが気になります。一応、このエラー自体は[こちらのqiita](https://qiita.com/terufumi1122/items/73da039e6fc90ee0a63f)通りにして消せたのですが。
90
+
91
+
92
+
82
93
  すべての設定やファイルを載せてしまうとかなり長文になってしまうので私なりに関係ないと思われるとことは省きました。もし、他に必要な情報がありましたら教えていただきたいです！
83
94
 
84
95
  ご教示お願い致します