質問編集履歴

4

修正

2021/06/07 10:58

投稿

RyoS_
RyoS_

スコア4

test CHANGED
File without changes
test CHANGED
@@ -7,32 +7,6 @@
7
7
  現在Nuxt.jsとLaravelでLIFFアプリを作っています。
8
8
 
9
9
  Nuxt.jsからAxiosでAPIを叩いた時、CORSエラーが発生しました。
10
-
11
-
12
-
13
- フロントエンド
14
-
15
- [Github](https://github.com/ssk9597/LINE-Form-Frontend/pull/1)
16
-
17
-
18
-
19
- デプロイは、Netlifyを使っています。
20
-
21
- URLは、https://deploy-preview-1--line-form-frontend.netlify.appです。
22
-
23
-
24
-
25
- バックエンド
26
-
27
- [Github](https://github.com/ssk9597/LINE-Form-Backend)
28
-
29
-
30
-
31
- Ngrokを使ってHTTPSのURLを取得しています。
32
-
33
- Dockerでコンテナを壊すとURLが変わります。
34
-
35
- 現時点でのURLは、https://29500ee86135.ngrok.io/です
36
10
 
37
11
 
38
12
 

3

レスポンスヘッダーに関して追記

2021/06/07 10:58

投稿

RyoS_
RyoS_

スコア4

test CHANGED
File without changes
test CHANGED
@@ -169,51 +169,3 @@
169
169
  ### レスポンスヘッダーに関して
170
170
 
171
171
  ![イメージ説明](3b084228a697e3ae75fc3d73c112b59c.png)
172
-
173
-
174
-
175
- ### axiosのプラグインでsetHeaderを使用してヘッダー情報を付与する
176
-
177
-
178
-
179
- ```
180
-
181
- export default function({ $axios, redirect }) {
182
-
183
- $axios.onResponse(config => {
184
-
185
- $axios.setHeader('Access-Control-Allow-Origin', process.env.API_BROWSER_URL);
186
-
187
- $axios.setHeader('Access-Control-Allow-Methods', 'GET,HEAD,PUT,PATCH,POST,DELETE');
188
-
189
- $axios.setHeader(
190
-
191
- 'Access-Control-Allow-Headers',
192
-
193
- 'X-Requested-With, Origin, X-XSRF-TOKEN, Content-Type, Accept'
194
-
195
- );
196
-
197
- $axios.setHeader('Access-Control-Allow-Credentials', 'true');
198
-
199
- });
200
-
201
- }
202
-
203
- ```
204
-
205
-
206
-
207
- `Preflight Request`エラーが発生しています。
208
-
209
- `Access-Control-Allow-Origin`がないというエラーとなっています。
210
-
211
-
212
-
213
- 付与したと思うのですが何故このようなエラーが発生するのでしょうか?
214
-
215
-
216
-
217
-
218
-
219
- ![イメージ説明](db941c814daf67fbd5e8be8dae61183f.png)

2

axiosのプラグインでsetHeaderを使用してヘッダー情報を付与するを追記

2021/06/07 06:13

投稿

RyoS_
RyoS_

スコア4

test CHANGED
File without changes
test CHANGED
@@ -169,3 +169,51 @@
169
169
  ### レスポンスヘッダーに関して
170
170
 
171
171
  ![イメージ説明](3b084228a697e3ae75fc3d73c112b59c.png)
172
+
173
+
174
+
175
+ ### axiosのプラグインでsetHeaderを使用してヘッダー情報を付与する
176
+
177
+
178
+
179
+ ```
180
+
181
+ export default function({ $axios, redirect }) {
182
+
183
+ $axios.onResponse(config => {
184
+
185
+ $axios.setHeader('Access-Control-Allow-Origin', process.env.API_BROWSER_URL);
186
+
187
+ $axios.setHeader('Access-Control-Allow-Methods', 'GET,HEAD,PUT,PATCH,POST,DELETE');
188
+
189
+ $axios.setHeader(
190
+
191
+ 'Access-Control-Allow-Headers',
192
+
193
+ 'X-Requested-With, Origin, X-XSRF-TOKEN, Content-Type, Accept'
194
+
195
+ );
196
+
197
+ $axios.setHeader('Access-Control-Allow-Credentials', 'true');
198
+
199
+ });
200
+
201
+ }
202
+
203
+ ```
204
+
205
+
206
+
207
+ `Preflight Request`エラーが発生しています。
208
+
209
+ `Access-Control-Allow-Origin`がないというエラーとなっています。
210
+
211
+
212
+
213
+ 付与したと思うのですが何故このようなエラーが発生するのでしょうか?
214
+
215
+
216
+
217
+
218
+
219
+ ![イメージ説明](db941c814daf67fbd5e8be8dae61183f.png)

1

レスポンスヘッダーに関して追記

2021/06/06 13:20

投稿

RyoS_
RyoS_

スコア4

test CHANGED
File without changes
test CHANGED
@@ -161,3 +161,11 @@
161
161
  何故CORSエラーが発生するのでしょうか?
162
162
 
163
163
  大変恐縮ですが、ご教授お願いいたします。
164
+
165
+
166
+
167
+ ## 追記
168
+
169
+ ### レスポンスヘッダーに関して
170
+
171
+ ![イメージ説明](3b084228a697e3ae75fc3d73c112b59c.png)