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
460
Lambda@Edgeを利用したサードパーティJavaScriptのカナリアリリース / Canary release using Lamdba@Edge
edwardkenfox
0
50
AWS re:Invent 2019 / Hackathon for Good 参加録
edwardkenfox
2
440
Repro basketball club
edwardkenfox
0
170
Introduction to UX Optimizer
edwardkenfox
0
69
フロントエンド開発の落とし穴 / Fallacies of Client Side Programming (2019ver)
edwardkenfox
0
230
僕とprototypeとJSONで / Me and prototype down by the JSON
edwardkenfox
0
96
クライアントサイド開発の落とし穴 / Fallacies of Client Side Programming
edwardkenfox
0
290
Beacon API ことはじめ 〜そしてkeepalive fetchへ〜 / Beacon API The Basics
edwardkenfox
0
960
Other Decks in Technology
See All in Technology
Cloud Native Java with Spring Boot (CNCF Aarhus, April 2024)
thomasvitale
1
180
オーナーシップを持つ領域を明確にする
konifar
13
3.2k
[新卒向け研修資料] テスト文字列に「うんこ」と入れるな(2024年版)
infiniteloop_inc
4
16k
MapLibreとAmazon Location Service
dayjournal
1
160
20分で完全に理解するGrafanaダッシュボード
hamadakoji
3
680
DevOpsメトリクスとアウトカムの接続にトライ!開発プロセスを通して計測できるメトリクスの活用方法
ham0215
2
240
KubeConにproposalを送りたい人へのアドバイス
sat
PRO
3
260
検証を通して見えてきたTiDBの性能特性
lycorptech_jp
PRO
6
3.8k
障害対応をちょっとずつよくしていくための 演習の作りかた
heleeen
0
240
Janus
bkuhlmann
1
490
私が trocco を推す理由
__allllllllez__
1
260
JSON攻略法.pdf
miyakemito
8
5.1k
Featured
See All Featured
Teambox: Starting and Learning
jrom
128
8.4k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
187
16k
Scaling GitHub
holman
457
140k
How STYLIGHT went responsive
nonsquared
92
4.8k
Automating Front-end Workflow
addyosmani
1356
200k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
322
20k
In The Pink: A Labor of Love
frogandcode
138
21k
Designing the Hi-DPI Web
ddemaree
276
33k
Building a Scalable Design System with Sketch
lauravandoore
456
32k
Into the Great Unknown - MozCon
thekraken
10
1k
Building Better People: How to give real-time feedback that sticks.
wjessup
355
18k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
2
1.3k
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