質問編集履歴
2
fetch mode corsでyahoo apiからresponceデータを取得可能
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -193,3 +193,109 @@
|
|
|
193
193
|
|
|
194
194
|
|
|
195
195
|
どうしたらAPIのデータを取得できるのかご教示いただけたら幸いです。
|
|
196
|
+
|
|
197
|
+
|
|
198
|
+
|
|
199
|
+
10/18 追記
|
|
200
|
+
|
|
201
|
+
fetchのmodeをcors指定にして、クロームブラウザの拡張ライブラリ「Access-Control-Allow-Origin」をONして
|
|
202
|
+
|
|
203
|
+
yahoo APIにアクセスしたところ、responseでデータの取得はできました
|
|
204
|
+
|
|
205
|
+
ただし、strictモードでのエラーが発生しており画面にデータを表示できていない状態です。
|
|
206
|
+
|
|
207
|
+
|
|
208
|
+
|
|
209
|
+
yahoo api(V2)はjsonpには対応していないようですがcorsには対応していると思われます。
|
|
210
|
+
|
|
211
|
+
クロスサイトオリジンの制限はブラウザでの制限なのでjsonpが使えないため
|
|
212
|
+
|
|
213
|
+
chromeの拡張ライブラリで乗り越えました。
|
|
214
|
+
|
|
215
|
+
|
|
216
|
+
|
|
217
|
+
問題がcorsからstrictモードになったので別に質問させていただきます。
|
|
218
|
+
|
|
219
|
+
ご回答者様ありがとうございました。
|
|
220
|
+
|
|
221
|
+
|
|
222
|
+
|
|
223
|
+
|
|
224
|
+
|
|
225
|
+
コードの編集
|
|
226
|
+
|
|
227
|
+
// const responce = await fetchJsonp(`${API_URL}?${queryString}`);
|
|
228
|
+
|
|
229
|
+
const responce = await fetch(`${API_URL}?${queryString}` ,{mode:'cors'});
|
|
230
|
+
|
|
231
|
+
|
|
232
|
+
|
|
233
|
+
responseデータ
|
|
234
|
+
|
|
235
|
+
|
|
236
|
+
|
|
237
|
+
|
|
238
|
+
|
|
239
|
+
|
|
240
|
+
|
|
241
|
+
Strictでのエラー
|
|
242
|
+
|
|
243
|
+
TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them
|
|
244
|
+
|
|
245
|
+
at Function.r (<anonymous>:1:83)
|
|
246
|
+
|
|
247
|
+
at Object._callee$ (http://localhost:3000/static/js/bundle.js:55313:22)
|
|
248
|
+
|
|
249
|
+
at tryCatch (http://localhost:3000/static/js/bundle.js:1218:40)
|
|
250
|
+
|
|
251
|
+
at Generator.invoke [as _invoke] (http://localhost:3000/static/js/bundle.js:1452:22)
|
|
252
|
+
|
|
253
|
+
at Generator.prototype.<computed> [as next] (http://localhost:3000/static/js/bundle.js:1270:21)
|
|
254
|
+
|
|
255
|
+
at step (http://localhost:3000/static/js/bundle.js:55244:191)
|
|
256
|
+
|
|
257
|
+
at http://localhost:3000/static/js/bundle.js:55244:437
|
|
258
|
+
|
|
259
|
+
at new Promise (<anonymous>)
|
|
260
|
+
|
|
261
|
+
at http://localhost:3000/static/js/bundle.js:55244:99
|
|
262
|
+
|
|
263
|
+
at http://localhost:3000/static/js/bundle.js:55345:19
|
|
264
|
+
|
|
265
|
+
at http://localhost:3000/static/js/bundle.js:46615:18
|
|
266
|
+
|
|
267
|
+
at http://localhost:3000/static/js/bundle.js:46593:7806
|
|
268
|
+
|
|
269
|
+
at Object.onUpdate (http://localhost:3000/static/js/bundle.js:55671:7)
|
|
270
|
+
|
|
271
|
+
at Ranking.componentWillUpdate (http://localhost:3000/static/js/bundle.js:55478:20)
|
|
272
|
+
|
|
273
|
+
at updateClassInstance (http://localhost:3000/static/js/bundle.js:23570:18)
|
|
274
|
+
|
|
275
|
+
at updateClassComponent (http://localhost:3000/static/js/bundle.js:27457:20)
|
|
276
|
+
|
|
277
|
+
at beginWork (http://localhost:3000/static/js/bundle.js:28970:16)
|
|
278
|
+
|
|
279
|
+
at beginWork$1 (http://localhost:3000/static/js/bundle.js:33529:14)
|
|
280
|
+
|
|
281
|
+
at performUnitOfWork (http://localhost:3000/static/js/bundle.js:32504:12)
|
|
282
|
+
|
|
283
|
+
at workLoopSync (http://localhost:3000/static/js/bundle.js:32480:22)
|
|
284
|
+
|
|
285
|
+
at performSyncWorkOnRoot (http://localhost:3000/static/js/bundle.js:32106:9)
|
|
286
|
+
|
|
287
|
+
at http://localhost:3000/static/js/bundle.js:21439:24
|
|
288
|
+
|
|
289
|
+
at unstable_runWithPriority (http://localhost:3000/static/js/bundle.js:48446:12)
|
|
290
|
+
|
|
291
|
+
at runWithPriority$1 (http://localhost:3000/static/js/bundle.js:21389:10)
|
|
292
|
+
|
|
293
|
+
at flushSyncCallbackQueueImpl (http://localhost:3000/static/js/bundle.js:21434:7)
|
|
294
|
+
|
|
295
|
+
at flushSyncCallbackQueue (http://localhost:3000/static/js/bundle.js:21422:3)
|
|
296
|
+
|
|
297
|
+
at discreteUpdates$1 (http://localhost:3000/static/js/bundle.js:32243:7)
|
|
298
|
+
|
|
299
|
+
at discreteUpdates (http://localhost:3000/static/js/bundle.js:11156:12)
|
|
300
|
+
|
|
301
|
+
at dispatchDiscreteEvent (http://localhost:3000/static/js/bundle.js:14518:3)
|
1
fetch-jsonpをfetchに変更
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -169,3 +169,27 @@
|
|
|
169
169
|
|
|
170
170
|
|
|
171
171
|
以上、ご査収の程よろしくお願い申し上げます。
|
|
172
|
+
|
|
173
|
+
|
|
174
|
+
|
|
175
|
+
|
|
176
|
+
|
|
177
|
+
追記 fetch-jsonpをfetchに変更
|
|
178
|
+
|
|
179
|
+
// const responce = await fetchJsonp(`${API_URL}?${queryString}`);
|
|
180
|
+
|
|
181
|
+
const responce = await fetch(`${API_URL}?${queryString}`);
|
|
182
|
+
|
|
183
|
+
|
|
184
|
+
|
|
185
|
+
fetchに変えてみたところ、下記エラーが表示されました。
|
|
186
|
+
|
|
187
|
+
「Failed to load resource: net::ERR_FAILED」
|
|
188
|
+
|
|
189
|
+
API自体をたたけていないようです。
|
|
190
|
+
|
|
191
|
+
|
|
192
|
+
|
|
193
|
+
|
|
194
|
+
|
|
195
|
+
どうしたらAPIのデータを取得できるのかご教示いただけたら幸いです。
|