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
92
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
130
クライアントサイド開発の落とし穴 / 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
2025-07-25 NOT A HOTEL TECH TALK ━ スマートホーム開発の最前線 ━ SOFTWARE
wakinchan
0
180
TypeScript 上達の道
ysknsid25
23
5k
人に寄り添うAIエージェントとアーキテクチャ #BetAIDay
layerx
PRO
2
460
AIエージェントを支える設計
tkikuchi1002
12
2.7k
LLMでAI-OCR、実際どうなの? / llm_ai_ocr_layerx_bet_ai_day_lt
sbrf248
0
380
大規模イベントを支える ABEMA の アーキテクチャ 変遷 2025
nagapad
5
580
ファインディにおける Dataform ブランチ戦略
hiracky16
0
240
経験がないことを言い訳にしない、 AI時代の他領域への染み出し方
parayama0625
0
280
From Live Coding to Vibe Coding with Firebase Studio
firebasethailand
1
340
【CEDEC2025】『ウマ娘 プリティーダービー』における映像制作のさらなる高品質化へ!~ 豊富な素材出力と制作フローの改善を実現するツールについて~
cygames
PRO
0
110
【Λ(らむだ)】最近のアプデ情報 / RPALT20250729
lambda
0
190
LLM開発を支えるエヌビディアの生成AIエコシステム
acceleratedmu3n
0
350
Featured
See All Featured
Fireside Chat
paigeccino
37
3.6k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
The Cost Of JavaScript in 2023
addyosmani
51
8.7k
Speed Design
sergeychernyshev
32
1k
Visualization
eitanlees
146
16k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
Being A Developer After 40
akosma
90
590k
Into the Great Unknown - MozCon
thekraken
40
1.9k
Music & Morning Musume
bryan
46
6.7k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Why Our Code Smells
bkeepers
PRO
337
57k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
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