Upgrade to Pro — share decks privately, control downloads, hide ads and more …

fetchとCORSに潜む罠

 fetchとCORSに潜む罠

20160621
Meguro.es @ Wantedly
http://meguroes.connpass.com/event/32167/

D32564792887e3fb5955021f9804c0a6?s=128

Edward Fox

June 21, 2016
Tweet

Transcript

  1. fetchͱCORSʹજΉ᠘ EDWARD FOX @Meguro.es 2016/06/21

  2. Edward Fox - Developer @ Repro Inc. - RoR, Javascript,

    AWS - UI/UX, Team Development
  3. repro.io - ϞόΠϧΞϓϦ޲͚ ϚʔέςΟϯάπʔϧ

  4. None
  5. ࠓ೔࿩͢͜ͱ fetch APIͷར༻ͱCORSʢCloudFrontʣ ͰϋϚͬͨ᠘

  6. ࠓ೔࿩͞ͳ͍͜ͱ - fetch ͷৄ͍͠࢖͍ํ - CORS ͷৄࡉ - CloudFront ͷઃఆৄࡉ

  7. fetchͱ͸ 1 WHATWGʹΑΔఆٛ - Fetchඪ४͸ɺϦΫΤετ, Ԡ౴, ͓Αͼ ͜ͷ̎ͭΛଋറ͢Δॲཧ — fetching

    ʢϦιʔεऔಘ ॲཧʣ— Λఆٛ͢Δɻ - Fetchඪ४ʹΑΓJavascriptͷfetch() API ΋ఏڙ͞ΕΔ
  8. fetchͱ͸ 2-1 WHATWGͷఏڙ͢Δpolyfill࣮૷ - fetch APIͷ࢓༷ʹ४ڌ͢Δpolyfill ࣮૷ - https://github.com/github/fetch

  9. fetchͱ͸ 2-2 GET fetch("/articles") .then(function(response) { return response.text(); }) .then(function(text)

    { document.body.innerHTML = text; })
  10. ΍Γ͔ͨͬͨ͜ͱ - ϝοηʔδ࡞੒ػೳͷ Ӿཡը໘Λ࡞Δ

  11. None
  12. None
  13. - طଘͷ#editϖʔδ - fetchͰը૾Λऔಘ͠දࣔ - ৽͍͠#showϖʔδ - Rails͔Βը૾ϦϯΫΛؚΉ HTMLΛฦ͢

  14. ৽͘͠࡞ͬͨ#showϖʔδΛ ϦϦʔεʂ

  15. None
  16. ͳ͔ͥؔ܎ͳ͍#editϖʔδͰ Կ΋දࣔ͞Εͳ͍ʂ

  17. ରࡦ 1 fetchͷϔομΛม͑ͯΈΔ

  18. fetch("/messages/1234", { headers: { "Accept": "application/json", "Content-Type": "application/json", } })

  19. None
  20. ରࡦ 2 CloudFront ͷCORSઃఆΛ͍͘͡Γ౗͢

  21. None
  22. None
  23. ରࡦ 3 fetchͰCORSΛແޮʹ͢Δ

  24. fetch("/messages/1234", { mode: "no-cors", })

  25. None
  26. None
  27. ࣮ࡍʹى͖͍ͯͨ͜ͱ 1. #showͰΫϥΠΞϯτʹը૾͕Ωϟογϡ͞ΕΔ ͨͩ͠ɺAccess-Control-Allow-Originϔομ͸ͳ͠ 2. ಉ͡ը૾Λ#editͰऔಘ͠Α͏ͱ͢Δ ͢ͰʹϦιʔε͸Ωϟογϡ͞Ε͍ͯΔ fetchͷCORSʹඞཁͳϔομ͕Ϧιʔεʹͳ͍ͨΊɺ fetchϦΫΤετࣗମ͕தஅ͞ΕΔ 3.

    runtime error Ҏ߱ͷॲཧ͸͢΂ͯதஅ͞Εɺը૾ΛؚΉશͯͷίϯ ςϯπ͕දࣔ͞Εͳ͍
  28. ղܾࡦ fetchͷϔομʹ Λ௥Ճ pragma: “no-cache”

  29. ·ͱΊ ɾfetchΛ࢖ͬͯCORSͳϦιʔεΛ औಘ͢Δͱ͖͸ཁ஫ҙ ɾը໘ؒͰϦιʔεͷऔಘํ๏͕ ҟͳΔ͜ͱʹΑΔόά͕͋Δ͜ͱ Λ஌ͬͨ

  30. ٙ໰ ɾΩϟογϡ͞Ε͍ͯΔ΋ͷΛΘ ͟Θ͟ແޮʹ͢Δͷ͕ద੾ͳͷ͔ʁ ɾΫϥΠΞϯτͰͷΩϟογϡʹ ىҼ͢ΔόάΛૣظʹݟ͚ͭΔʹ ͸ʁ

  31. ࢀߟ: - Fetch Living Standard - Fetch API ղઆɺ·ͨ͸ Web

    ʹ͓͍ͯ "Fetch ͢Δ" ͱ͸Կ͔ʁ - ͓ർΕ͞·XMLHttpRequestɺ͜Μʹͪ͸fetch - [৽ػೳ] Amazon CloudFront͕CORSʹରԠ͠·ͨ͠ - fetch(), how do you make a non-cached request?
  32. WE’RE HIRING! ❤

  33. None