์ฟ ํ‚ค๊ฐ€ ๋ฐœ๊ธ‰๋˜์ง€ ์•Š์„ ๋•Œ, Access-Control-Allow-Origin ์˜ค๋ฅ˜ ํ•ด๊ฒฐ ๋ฐฉ๋ฒ•
์›น (WEB)/์—๋Ÿฌํ•ด๊ฒฐ 2021. 2. 6. 23:35

์ฟ ํ‚ค๊ฐ€ ๋ฐœ๊ธ‰๋˜์ง€ ์•Š์„ ๋•Œ KOS ํ”„๋กœ์ ํŠธ๋Š” ํ”„๋ก ํŠธ์—”๋“œ์— React.js๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ์„œ๋ฒ„๋Š” go lang ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ gin์„ ์ด์šฉํ•˜์—ฌ ์ง„ํ–‰์ค‘์ด๋‹ค. ์ฒ˜์Œ์— api๋ฅผ ๋งŒ๋“ค๊ณ  ๋‚˜์„œ๋Š” postman์ด๋ผ๋Š” ํˆด๋กœ ์ œ๋Œ€๋กœ ๋™์ž‘ํ•˜๋Š”์ง€ ๊ฒ€์‚ฌํ•œ๋‹ค. ์ฒ˜์Œ์—๋Š” api์—ฐ๊ฒฐ์ด ์ˆœ์กฐ๋กญ๊ฒŒ ๋˜๋‹ค๊ฐ€ ๋กœ๊ทธ์ธ์„ ์œ„ํ•ด์„œ ์ฟ ํ‚ค๋ฅผ ๋ฐœ๊ธ‰ํ•˜๋Š” api๋ฅผ ์ž‘์„ฑํ•œ ์ดํ›„์— ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒํ–ˆ๋‹ค. ์ฟ ํ‚ค๊ฐ€ ๋ฐœ๊ธ‰๋˜์ง€ ์•Š๋Š”๋‹ค. ํ”„๋ก ํŠธ์—”๋“œ์—์„œ ๋ฐ›์€ Network๋„ 200์œผ๋กœ ์ •์ƒ์ด๊ณ  set-cookie๋˜๋Š” ๊ฒƒ๊นŒ์ง€ ๋ณด์ด๋ฉฐ response๋ฅผ ์ถœ๋ ฅํ•ด๋ณด์•„๋„ ์ •์ƒ์ด๋‹ค. ๊ทธ๋ ‡๋‹ค๋ฉด ์™œ ์ฟ ํ‚ค๊ฐ€ ๋ฐœ๊ธ‰๋˜์ง€ ์•Š์„๊นŒ? ๋ฐฑ์—”๋“œ์—์„œ ํ”„๋ก ํŠธ์—”๋“œ์— ์ฟ ํ‚ค๋ฅผ ์ €์žฅ์‹œํ‚ค๊ธฐ ์œ„ํ•ด์„œ๋Š” ์–‘์ชฝ์˜ credential ์†์„ฑ์„ ๋ชจ๋‘ ON ํ•ด์ฃผ์–ด์•ผํ•˜๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค. ๋จผ์ € ๋ฐฑ์—”๋“œ(go lang)์˜ ์ฝ”๋“œ๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™๋‹ค. // ..

Ajax(Asynchronous Javascript And Xml)
์›น (WEB)/๊ณต๋ถ€ 2021. 2. 6. 23:04

Ajax๋Š” js๋ฅผ ์ด์šฉํ•œ ๋น„๋™๊ธฐ ํ†ต์‹ ์œผ๋กœ, ํด๋ผ์ด์–ธํŠธ ์„œ๋ฒ„ ๊ฐ„์˜ xml(Extensible Markup Language)๋ฐ์ดํ„ฐ๋ฅผ ์ฃผ๊ณ ๋ฐ›๋Š” ๊ธฐ์ˆ ์ด๋‹ค. ์ „์ฒด ํŽ˜์ด์ง€๋ฅผ ๋ฆฌ๋กœ๋“œํ•˜์ง€ ์•Š๊ณ  ํ•„์š”ํ•œ ๋ฐ์ดํ„ฐ๋งŒ ๋กœ๋“œํ•  ์ˆ˜ ์žˆ๋‹ค๋Š” ์žฅ์ ์ด ์žˆ๋‹ค. Ajax ๋ฐฉ์‹์„ ์ด์šฉํ•œ ์›น API๋Š” XMLHttpRequest ๋ถ€ํ„ฐ ์‹œ์ž‘ํ•˜์—ฌ fetch๋ฅผ ๊ฑฐ์ณ axios๊นŒ์ง€ ๋‹ค์–‘ํ•˜๋‹ค. XMLHttpRequest๋Š” ๋ณต์žกํ•˜๊ณ  ๊ฐ€๋…์„ฑ์ด ๋–จ์–ด์ง€๊ธฐ ๋•Œ๋ฌธ์— fetch api๊ฐ€ ES6์—์„œ๋ถ€ํ„ฐ ํ‘œ์ค€์ด ๋˜์—ˆ๋Š”๋ฐ, ๋”ฐ๋ผ์„œ ํ˜„์žฌ fetch api๋Š” ๊ธฐ๋ณธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋กœ ๋”ฐ๋กœ ์„ค์น˜ํ•˜์ง€ ์•Š๊ณ  ์‚ฌ์šฉํ•ด๋„ ๋œ๋‹ค. axios๋Š” Node.js์—์„œ XMLHttpRequests๋ฅผ ์‚ฌ์šฉํ•˜๊ธฐ ์ข‹๊ฒŒ ๋งŒ๋“ค์–ด๋‘” api์ด๋ฉฐ ๋”ฐ๋กœ ์„ค์น˜ํ•ด์ฃผ์–ด์•ผ ๋™์ž‘ํ•œ๋‹ค. TOP Ajax API๋ฅผ ์ฐธ๊ณ ํ•˜๋ฉด ๋” ๋งŽ์€..