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
720
Lambda@Edgeを利用したサードパーティJavaScriptのカナリアリリース / Canary release using Lamdba@Edge
edwardkenfox
0
96
AWS re:Invent 2019 / Hackathon for Good 参加録
edwardkenfox
2
580
Repro basketball club
edwardkenfox
0
240
Introduction to UX Optimizer
edwardkenfox
0
110
フロントエンド開発の落とし穴 / 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
450
Beacon API ことはじめ 〜そしてkeepalive fetchへ〜 / Beacon API The Basics
edwardkenfox
0
1.1k
Other Decks in Technology
See All in Technology
JTCにおける内製×スクラム開発への挑戦〜内製化率95%達成の舞台裏/JTC's challenge of in-house development with Scrum
aeonpeople
0
270
Rustから学ぶ 非同期処理の仕組み
skanehira
1
150
いま注目のAIエージェントを作ってみよう
supermarimobros
0
360
MagicPod導入から半年、オープンロジQAチームで実際にやったこと
tjoko
0
110
COVESA VSSによる車両データモデルの標準化とAWS IoT FleetWiseの活用
osawa
1
400
OCI Oracle Database Services新機能アップデート(2025/06-2025/08)
oracle4engineer
PRO
0
180
まずはマネコンでちゃちゃっと作ってから、それをCDKにしてみよか。
yamada_r
2
120
これでもう迷わない!Jetpack Composeの書き方実践ガイド
zozotech
PRO
0
1.1k
フルカイテン株式会社 エンジニア向け採用資料
fullkaiten
0
8.8k
Django's GeneratedField by example - DjangoCon US 2025
pauloxnet
0
160
Android Audio: Beyond Winning On It
atsushieno
0
3.4k
実践!カスタムインストラクション&スラッシュコマンド
puku0x
0
550
Featured
See All Featured
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
GraphQLとの向き合い方2022年版
quramy
49
14k
Embracing the Ebb and Flow
colly
87
4.8k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3k
Git: the NoSQL Database
bkeepers
PRO
431
66k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
It's Worth the Effort
3n
187
28k
Agile that works and the tools we love
rasmusluckow
330
21k
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