teratail
回答率
85.47%
質問するログイン新規登録
トップに関する質問リクエストヘッダーを axios の設定によって場合分けしたい。

編集履歴

質問編集履歴

5

文法の修正

2021/04/23 13:07

投稿

kento_ar
kento_ar

スコア30

test CHANGED
File without changes
test CHANGED
@@ -48,4 +48,4 @@
48
48
 
49
49
  ```
50
50
 
51
- if で場合分けをしようと考えていますが、どのようにすれば記述すればよいでしょうか？
51
+ if で場合分けをしようと考えています。例えとして、url == "https:~~~~~~~~~~~~~~~~~~~~~~~~~~~" と書きましたが、URLオプションは存在しないため、仮の記述とさせてください。実際のところは、どのようにすれば記述すればよいでしょうか？

4

文法の修正

2021/04/23 13:07

投稿

kento_ar
kento_ar

スコア30

test CHANGED
@@ -1 +1 @@
1
- リクエストヘッダーを場合分けしたい。
1
+ リクエストヘッダーを axios の設定によって場合分けしたい。
test CHANGED
File without changes

3

文法の修正

2021/04/23 13:04

投稿

kento_ar
kento_ar

スコア30

test CHANGED
File without changes
test CHANGED
@@ -1,8 +1,6 @@
1
1
  ### 問題
2
2
 
3
3
  特定のURLにリクエストするとき、OPTIONSリクエストを付けずにリクエストをしたいです。
4
-
5
- 何か方法をありませんでしょうか？
6
4
 
7
5
 
8
6
 
@@ -20,7 +18,7 @@
20
18
 
21
19
  else以下の記述は、リクエストヘッダーに uid や access-token などの情報を付与する設定です。
22
20
 
23
- しかし、特定のサーバーには、何もヘッダーに付与しない単純なリクエストを送りたいと思っています。if で場合分けをしようと考えていますが、どのようにすれば記述すればよいでしょうか？
21
+ しかし、特定のサーバーには、何もヘッダーに付与しない単純なリクエストを送りたいと思っています。
24
22
 
25
23
  ```
26
24
 
@@ -49,3 +47,5 @@
49
47
  })
50
48
 
51
49
  ```
50
+
51
+ if で場合分けをしようと考えていますが、どのようにすれば記述すればよいでしょうか？

2

質問全体の改善

2021/04/23 13:03

投稿

kento_ar
kento_ar

スコア30

test CHANGED
@@ -1 +1 @@
1
- リクエストヘッダーに "application/json" の設定をする時としない時とで場合分けしたい
1
+ リクエストヘッダーを場合分けしたい。
test CHANGED
@@ -1,114 +1,36 @@
1
- 開発環境
1
+ ### 問題
2
2
 
3
- ・フロントエンド(Nuxt/localhost:3000)
3
+ 特定のURLにリクエストするとき、OPTIONSリクエストを付けずにリクエストをしたいです。
4
4
 
5
- ・バックエンド(Rails/localhost:5000)
5
+ 何か方法をありませんでしょうか？
6
6
 
7
7
 
8
8
 
9
- 現在この二つのサーバーのやり取りを JSON で行って、SPA化を実現しています。
9
+ 参考リンク：
10
10
 
11
- リクエストヘッダーの共通設定は、後述の（frontend/plugins/axios.js）で行っており、onRequestオプションに config.headers["content-type"] = "application/json" を記述しています。
11
+ [CORS: OPTIONSリクエスト（preflight request）を避ける](https://qiita.com/nnishimura/items/1f156f05b26a5bce3672)
12
12
 
13
13
 
14
14
 
15
- しかし、この設定の状態で外部の天気予報APIである openweathermap にリクエストを送ると、ヘッダーに"application/json"が含まれているため、preflightリクエストが飛んでしまい、以下のようにブロックされてしまいます。
15
+ ### 設定ファイル
16
16
 
17
17
 
18
18
 
19
- ```
19
+ 以下は、axios の設定ファイル（/plugins/axios.js）です。
20
20
 
21
- ▷ Access to XMLHttpRequest at ‘https://api.openweathermap.org/data/2.5/weather?units=metric&appid=(WEATHER_API_KEY)’ from origin ‘http://localhost:3000’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: It does not have HTTP ok status.
21
+ else以下の記述は、リクエストヘッダーに uid や access-token などの情報を付与する設定です。
22
22
 
23
- ```
24
-
25
-
26
-
27
- そのため、openweathermap にリクエストを送る時に限り、ヘッダー情報に "application/json" を含めないようにするにはどうすれば良いのでしょうか？
23
+ しかし、特定のサーバーには、何もヘッダーに付与しない単純なリクエストを送りたいと思っています。if で場合分けをしようと考えていますが、どのようにすれば記述すればよいでしょうか？
28
-
29
-
30
-
31
- お忙しいところ恐れ入りますが、ご教授いただけませんでしょうか？
32
-
33
-
34
-
35
-
36
-
37
-
38
-
39
- ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
40
-
41
-
42
-
43
- 関連ファイルについて以下に記述いたします。
44
-
45
-
46
-
47
- index.vue
48
-
49
- ```
50
-
51
- <template>
52
-
53
- <div>
54
-
55
- <v-btn @click="asyncData">今日の東京の天気をAPIで取得！</v-btn>
56
-
57
- </div>
58
-
59
- </template>
60
-
61
-
62
-
63
- export default {
64
-
65
- methods: {
66
-
67
- async asyncData() {
68
-
69
- const weatherData = await this.$axios.$get(
70
-
71
- 'https://api.openweathermap.org/data/2.5/weather?q=tokyo,jp&APPID=' +
72
-
73
- process.env.WEATHER_API_KEY
74
-
75
- ).then(weatherData => {
76
-
77
- console.log(weatherData);
78
-
79
- })
80
-
81
- .catch(error => {
82
-
83
- console.log(error);
84
-
85
- })
86
-
87
- },
88
-
89
- }
90
-
91
- ```
92
-
93
- ※上記、process.env.WEATHER_API_KEY は環境変数です。
94
-
95
-
96
-
97
-
98
-
99
-
100
-
101
- frontend/plugins/axios.js
102
24
 
103
25
  ```
104
26
 
105
27
  export default function ({ $axios, redirect }) {
106
28
 
107
- // $axios.setToken("access_token")
108
-
109
29
  $axios.onRequest((config) => {
110
30
 
111
- console.log("-------- start /plugins/axios.js------------")
31
+ if ( 例: url == "https:~~~~~~~~~~~~~~~~~~~~~~~~~~~") {
32
+
33
+ } else {
112
34
 
113
35
  config.headers.client = window.localStorage.getItem("client")
114
36
 
@@ -122,122 +44,8 @@
122
44
 
123
45
  config.headers["content-type"] = "application/json"
124
46
 
125
- console.log(config)
47
+ }
126
48
 
127
49
  })
128
50
 
129
-
130
-
131
- $axios.onResponse((response) => {
132
-
133
- $axios.setHeader("Access-Control-Allow-Origin", "*")
134
-
135
- console.log("⇩response")
136
-
137
- console.log(response)
138
-
139
- if (response.headers.client) {
140
-
141
- console.log("認証情報あり。 /plugins/axios.js")
142
-
143
- localStorage.setItem("access-token", response.headers["access-token"])
144
-
145
- localStorage.setItem("client", response.headers.client)
146
-
147
- localStorage.setItem("uid", response.headers.uid)
148
-
149
- localStorage.setItem("token-type", response.headers["token-type"])
150
-
151
- localStorage.setItem("expiry", response.headers["expiry"])
152
-
153
- } else {
154
-
155
- console.log("認証情報を発見できませんでした")
156
-
157
- }
158
-
159
- console.log("-------- end /plugins/axios.js------------")
160
-
161
- })
162
-
163
- }
164
-
165
51
  ```
166
-
167
-
168
-
169
-
170
-
171
- nuxt.config.js
172
-
173
- ```
174
-
175
- plugins: [
176
-
177
- { src: '~/plugins/axios.js', ssr: false },
178
-
179
- { src: "~/plugins/localStorage.js", ssr: false },
180
-
181
- ],
182
-
183
- modules: [
184
-
185
- // '@nuxtjs/proxy',
186
-
187
- '@nuxtjs/axios',
188
-
189
- "nuxt-webfontloader",
190
-
191
- "nuxt-i18n",
192
-
193
- "nuxt-client-init-module",
194
-
195
- ],
196
-
197
- axios: {
198
-
199
- baseURL: 'http://localhost:5000',
200
-
201
- },
202
-
203
- auth: {
204
-
205
- redirect: {
206
-
207
- login: '/users/login',
208
-
209
- logout: '/',
210
-
211
- callback: false,
212
-
213
- home: '/'
214
-
215
- },
216
-
217
- strategies: {
218
-
219
- local: {
220
-
221
- endpoints: {
222
-
223
- login: { url: '/api/v1/auth/sign_in', method: 'post', propertyName: 'token' },
224
-
225
- logout: false,
226
-
227
- user: false
228
-
229
- }
230
-
231
- }
232
-
233
- }
234
-
235
- },
236
-
237
- }
238
-
239
- ```
240
-
241
-
242
-
243
- ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

1

文法の修正

2021/04/23 13:02

投稿

kento_ar
kento_ar

スコア30

test CHANGED
@@ -1 +1 @@
1
- リクエストヘッダーに "application/json" を含める時と含めない時とで場合分けしたい
1
+ リクエストヘッダーに "application/json" の設定をする時としない時とで場合分けしたい
test CHANGED
File without changes