Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
fetchとCORSに潜む罠
Search
Edward Fox
June 21, 2016
Technology
0
1.1k
fetchとCORSに潜む罠
20160621
Meguro.es @ Wantedly
http://meguroes.connpass.com/event/32167/
Edward Fox
June 21, 2016
Tweet
Share
More Decks by Edward Fox
See All by Edward Fox
Priorityを制するものはローディングを制す
edwardkenfox
4
710
Lambda@Edgeを利用したサードパーティJavaScriptのカナリアリリース / Canary release using Lamdba@Edge
edwardkenfox
0
93
AWS re:Invent 2019 / Hackathon for Good 参加録
edwardkenfox
2
570
Repro basketball club
edwardkenfox
0
240
Introduction to UX Optimizer
edwardkenfox
0
100
フロントエンド開発の落とし穴 / Fallacies of Client Side Programming (2019ver)
edwardkenfox
0
320
僕とprototypeとJSONで / Me and prototype down by the JSON
edwardkenfox
0
140
クライアントサイド開発の落とし穴 / Fallacies of Client Side Programming
edwardkenfox
0
440
Beacon API ことはじめ 〜そしてkeepalive fetchへ〜 / Beacon API The Basics
edwardkenfox
0
1.1k
Other Decks in Technology
See All in Technology
LLM 機能を支える Langfuse / ClickHouse のサーバレス化
yuu26
9
1.5k
AIに目を奪われすぎて、周りの困っている人間が見えなくなっていませんか?
cap120
1
540
バクラクによるコーポレート業務の自動運転 #BetAIDay
layerx
PRO
1
910
Amazon S3 Vectorsは大規模ベクトル検索を低コスト化するサーバーレスなベクトルデータベースだ #jawsugsaga / S3 Vectors As A Serverless Vector Database
quiver
1
180
LTに影響を受けてテンプレリポジトリを作った話
hol1kgmg
0
350
生成AI時代におけるAI・機械学習技術を用いたプロダクト開発の深化と進化 #BetAIDay
layerx
PRO
1
1.1k
【CEDEC2025】『Shadowverse: Worlds Beyond』二度目のDCG開発でゲームをリデザインする~遊びやすさと競技性の両立~
cygames
PRO
1
340
GMOペパボのデータ基盤とデータ活用の現在地 / Current State of GMO Pepabo's Data Infrastructure and Data Utilization
zaimy
3
210
Jamf Connect ZTNAとMDMで実現! 金融ベンチャーにおける「デバイストラスト」実例と軌跡 / Kyash Device Trust
rela1470
1
190
Findy Freelance 利用シーン別AI活用例
ness
0
410
プロダクトエンジニアリングで開発の楽しさを拡張する話
barometrica
0
130
ホリスティックテスティングの右側も大切にする 〜2つの[はか]る〜 / Holistic Testing: Right Side Matters
nihonbuson
PRO
0
670
Featured
See All Featured
Code Reviewing Like a Champion
maltzj
524
40k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.3k
For a Future-Friendly Web
brad_frost
179
9.9k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Embracing the Ebb and Flow
colly
86
4.8k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
How STYLIGHT went responsive
nonsquared
100
5.7k
How GitHub (no longer) Works
holman
314
140k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Transcript
fetchͱCORSʹજΉ᠘ EDWARD FOX @Meguro.es 2016/06/21
Edward Fox - Developer @ Repro Inc. - RoR, Javascript,
AWS - UI/UX, Team Development
repro.io - ϞόΠϧΞϓϦ͚ ϚʔέςΟϯάπʔϧ
None
ࠓ͢͜ͱ fetch APIͷར༻ͱCORSʢCloudFrontʣ ͰϋϚͬͨ᠘
ࠓ͞ͳ͍͜ͱ - fetch ͷৄ͍͍͠ํ - CORS ͷৄࡉ - CloudFront ͷઃఆৄࡉ
fetchͱ 1 WHATWGʹΑΔఆٛ - Fetchඪ४ɺϦΫΤετ, Ԡ, ͓Αͼ ͜ͷ̎ͭΛଋറ͢Δॲཧ — fetching
ʢϦιʔεऔಘ ॲཧʣ— Λఆٛ͢Δɻ - Fetchඪ४ʹΑΓJavascriptͷfetch() API ఏڙ͞ΕΔ
fetchͱ 2-1 WHATWGͷఏڙ͢Δpolyfill࣮ - fetch APIͷ༷ʹ४ڌ͢Δpolyfill ࣮ - https://github.com/github/fetch
fetchͱ 2-2 GET fetch("/articles") .then(function(response) { return response.text(); }) .then(function(text)
{ document.body.innerHTML = text; })
Γ͔ͨͬͨ͜ͱ - ϝοηʔδ࡞ػೳͷ Ӿཡը໘Λ࡞Δ
None
None
- طଘͷ#editϖʔδ - fetchͰը૾Λऔಘ͠දࣔ - ৽͍͠#showϖʔδ - Rails͔Βը૾ϦϯΫΛؚΉ HTMLΛฦ͢
৽͘͠࡞ͬͨ#showϖʔδΛ ϦϦʔεʂ
None
ͳ͔ͥؔͳ͍#editϖʔδͰ Կදࣔ͞Εͳ͍ʂ
ରࡦ 1 fetchͷϔομΛม͑ͯΈΔ
fetch("/messages/1234", { headers: { "Accept": "application/json", "Content-Type": "application/json", } })
None
ରࡦ 2 CloudFront ͷCORSઃఆΛ͍͘͡Γ͢
None
None
ରࡦ 3 fetchͰCORSΛແޮʹ͢Δ
fetch("/messages/1234", { mode: "no-cors", })
None
None
࣮ࡍʹى͖͍ͯͨ͜ͱ 1. #showͰΫϥΠΞϯτʹը૾͕Ωϟογϡ͞ΕΔ ͨͩ͠ɺAccess-Control-Allow-Originϔομͳ͠ 2. ಉ͡ը૾Λ#editͰऔಘ͠Α͏ͱ͢Δ ͢ͰʹϦιʔεΩϟογϡ͞Ε͍ͯΔ fetchͷCORSʹඞཁͳϔομ͕Ϧιʔεʹͳ͍ͨΊɺ fetchϦΫΤετࣗମ͕தஅ͞ΕΔ 3.
runtime error Ҏ߱ͷॲཧͯ͢தஅ͞Εɺը૾ΛؚΉશͯͷίϯ ςϯπ͕දࣔ͞Εͳ͍
ղܾࡦ fetchͷϔομʹ ΛՃ pragma: “no-cache”
·ͱΊ ɾfetchΛͬͯCORSͳϦιʔεΛ औಘ͢Δͱ͖ཁҙ ɾը໘ؒͰϦιʔεͷऔಘํ๏͕ ҟͳΔ͜ͱʹΑΔόά͕͋Δ͜ͱ Λͬͨ
ٙ ɾΩϟογϡ͞Ε͍ͯΔͷΛΘ ͟Θ͟ແޮʹ͢Δͷ͕దͳͷ͔ʁ ɾΫϥΠΞϯτͰͷΩϟογϡʹ ىҼ͢ΔόάΛૣظʹݟ͚ͭΔʹ ʁ
ࢀߟ: - Fetch Living Standard - Fetch API ղઆɺ·ͨ Web
ʹ͓͍ͯ "Fetch ͢Δ" ͱԿ͔ʁ - ͓ർΕ͞·XMLHttpRequestɺ͜Μʹͪfetch - [৽ػೳ] Amazon CloudFront͕CORSʹରԠ͠·ͨ͠ - fetch(), how do you make a non-cached request?
WE’RE HIRING! ❤
None