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
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
690
Lambda@Edgeを利用したサードパーティJavaScriptのカナリアリリース / Canary release using Lamdba@Edge
edwardkenfox
0
89
AWS re:Invent 2019 / Hackathon for Good 参加録
edwardkenfox
2
570
Repro basketball club
edwardkenfox
0
230
Introduction to UX Optimizer
edwardkenfox
0
97
フロントエンド開発の落とし穴 / Fallacies of Client Side Programming (2019ver)
edwardkenfox
0
310
僕とprototypeとJSONで / Me and prototype down by the JSON
edwardkenfox
0
130
クライアントサイド開発の落とし穴 / Fallacies of Client Side Programming
edwardkenfox
0
430
Beacon API ことはじめ 〜そしてkeepalive fetchへ〜 / Beacon API The Basics
edwardkenfox
0
1.1k
Other Decks in Technology
See All in Technology
Amazon Bedrockで実現する 新たな学習体験
kzkmaeda
2
680
なぜ私はいま、ここにいるのか? #もがく中堅デザイナー #プロダクトデザイナー
bengo4com
0
1.3k
使いたいMCPサーバーはWeb APIをラップして自分で作る #QiitaBash
bengo4com
0
1.2k
Understanding_Thread_Tuning_for_Inference_Servers_of_Deep_Models.pdf
lycorptech_jp
PRO
0
150
Geminiとv0による高速プロトタイピング
shinya337
0
190
LangSmith×Webhook連携で実現するプロンプトドリブンCI/CD
sergicalsix
1
150
急成長を支える基盤作り〜地道な改善からコツコツと〜 #cre_meetup
stefafafan
0
150
CursorによるPMO業務の代替 / Automating PMO Tasks with Cursor
motoyoshi_kakaku
2
780
KubeCon + CloudNativeCon Japan 2025 Recap
ren510dev
1
300
Amazon S3標準/ S3 Tables/S3 Express One Zoneを使ったログ分析
shigeruoda
5
590
無意味な開発生産性の議論から抜け出すための予兆検知とお金とAI
i35_267
0
860
Should Our Project Join the CNCF? (Japanese Recap)
whywaita
PRO
0
290
Featured
See All Featured
Thoughts on Productivity
jonyablonski
69
4.7k
Statistics for Hackers
jakevdp
799
220k
Stop Working from a Prison Cell
hatefulcrawdad
270
20k
What's in a price? How to price your products and services
michaelherold
246
12k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.6k
Typedesign – Prime Four
hannesfritz
42
2.7k
Designing Experiences People Love
moore
142
24k
Into the Great Unknown - MozCon
thekraken
39
1.9k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Why Our Code Smells
bkeepers
PRO
337
57k
Agile that works and the tools we love
rasmusluckow
329
21k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
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