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

編集履歴

質問編集履歴

4

大幅変更

2021/06/09 04:43

投稿

yaha4967
yaha4967

スコア106

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

3

追記

2021/06/09 04:43

投稿

yaha4967
yaha4967

スコア106

test CHANGED
File without changes
test CHANGED
@@ -176,7 +176,9 @@
176
176
 
177
177
  と出たことが気になります。一応、このエラー自体は[こちらのqiita](https://qiita.com/terufumi1122/items/73da039e6fc90ee0a63f)通りにして消せたのですが。
178
178
 
179
+ ・railsコンソールでクッキーが使えない
179
180
 
181
+ dockerコンテナを作ったあとrailsのコンテナに入りrailsコンソールでクッキーを使用しようとするとundefined local variabl or method 'cookies'となってしまいます。
180
182
 
181
183
 
182
184
 

2

2021/06/09 01:04

投稿

yaha4967
yaha4967

スコア106

test CHANGED
File without changes
test CHANGED
File without changes

1

2021/06/08 17:06

投稿

yaha4967
yaha4967

スコア106

test CHANGED
File without changes
test CHANGED
@@ -1,4 +1,8 @@
1
+ ```ここに言語を入力
2
+
3
+ コード
4
+
1
- 何かヒントでもいただければ幸いと思います！よろしくお願いします！
5
+ ```何かヒントでもいただければ幸いと思います！よろしくお願いします！
2
6
 
3
7
 
4
8
 
@@ -160,6 +164,24 @@
160
164
 
161
165
 
162
166
 
167
+ #私が気になってる部分
168
+
169
+
170
+
171
+ ・DockerによってIPアドレスが変わってる？
172
+
173
+ apiのログで
174
+
175
+ 「Cannot render console from <IPアドレス>!」
176
+
177
+ と出たことが気になります。一応、このエラー自体は[こちらのqiita](https://qiita.com/terufumi1122/items/73da039e6fc90ee0a63f)通りにして消せたのですが。
178
+
179
+
180
+
181
+
182
+
183
+
184
+
163
185
  すべての設定やファイルを載せてしまうとかなり長文になってしまうので私なりに関係ないと思われるとことは省きました。もし、他に必要な情報がありましたら教えていただきたいです！
164
186
 
165
187