์ธํŒŒ

You Can Become A

Pr

๋Šฆ๊ฒŒ ์‹œ์ž‘ํ•ด๋„ ๋ˆ„๊ตฌ๋“ ์ง€ ๋…ธ๋ ฅํ•˜๋ฉด ๊ฐœ๋ฐœ์ž๊ฐ€ ๋ ์ˆ˜ ์žˆ์–ด์š” !

cors

๊ณต๋ถ€ํ•œ ๋‚ด์šฉ์„ ์ •๋ฆฌํ•ฉ๋‹ˆ๋‹ค
WEB ์ง€์‹

๐ŸŒ ํฌ๋กฌ ๋ธŒ๋ผ์šฐ์ € PNA ๊ถŒํ•œ๊ณผ CORS ํ•ด๊ฒฐํ•˜๊ธฐ

Chrome PNA (Private Network Access) ์‚ฌ์„ค๋ง ์ ‘๊ทผ(private network access) ์ด๋ž€, ๋น„์ธ์ฆ๋œ ๊ณต์ธ(public) ์›น์‚ฌ์ดํŠธ์—์„œ, ์‚ฌ์ดํŠธ๋ฅผ ๋ฐฉ๋ฌธํ•œ ์‚ฌ์šฉ์ž์˜ ์™€ ๊ฐ™์€ ์‚ฌ์„ค ๋„คํŠธ์›Œํฌ๋ง(localhost(127.0.0.1) or 192.168.0.* ์•„์ดํ”ผ) ์—”๋“œํฌ์ธํŠธ์— ์—‘์„ธ์Šคํ•˜๋ ค ํ• ๋•Œ, ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ์š”์ฒญ์„ ์ œํ•œํ•˜๋Š” ์ƒˆ๋กœ์šด ๋ณด์•ˆ ํ–ฅ์ƒ WSC ์‚ฌ์–‘์„ ๋งํ•œ๋‹ค. PNA ๋™์ž‘ ๋ฉ”์ปค๋‹ˆ์ฆ˜์€ CORS(Cross-Origin Resource Sharing) ์ •์ฑ…์„ ํ™•์žฅํ•œ ๊ฐœ๋…์œผ๋กœ ์ ์šฉ๋œ๋‹ค. ๊ทธ๋ž˜์„œ ์‚ฌ์ดํŠธ์—์„œ ์‚ฌ์„ค ๋„คํŠธ์›Œํฌ ์„œ๋ฒ„์˜ ํ—ˆ๊ฐ€๋ฅผ ์šฐ์„  ์˜ˆ๋น„ ์š”์ฒญ(Preflight) ํ•˜๊ณ  ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ์š”์ฒญ์„ ์Šน์ธํ•œ ๊ฒฝ์šฐ์—๋งŒ, ๊ณต๊ณต ์›น์‚ฌ์ดํŠธ์—์„œ ์‚ฌ์„ค ๋„คํŠธ์›Œํฌ ์„œ๋ฒ„์˜ ๋ฆฌ์†Œ์Šค์— ์—‘์„ธ์Šค๊ฐ€ ๊ฐ€๋Šฅํ•˜๊ณ  ๊ทธ๋ ‡์ง€ ์•Š..

category_image
์ธํŒŒ_
2023.03.23
2
WEB ์ง€์‹

๐ŸŒ CORS ๋ณด์•ˆ ์ทจ์•ฝ์  ์˜ˆ๋ฐฉ ๊ฐ€์ด๋“œ

CORS์˜ ๋ณด์•ˆ ๋ฌธ์ œ์  ๋‹ค๋ฅธ ์ถœ์ฒ˜(Origin)์˜ ์„œ๋ฒ„์˜ ๋ฆฌ์†Œ์Šค๋ฅผ ์ œ์•ฝ์—†์ด ๊ฐ€์ ธ์™€ ์‚ฌ์šฉํ•  ๊ฒฝ์šฐ XSS(Cross-Site Scripting)๋‚˜ CSRF(Cross-Site Request Fogery)์™€ ๊ฐ™์€ ์Šคํฌ๋ฆฝํŒ… ๊ณต๊ฒฉ์„ ๋‹นํ•  ์œ„ํ—˜์„ฑ์ด ์žˆ๋‹ค. ๊ทธ๋ž˜์„œ ํƒ„์ƒํ•œ ๊ฒƒ์ด ๋ธŒ๋ผ์šฐ์ €์˜ SOP(Same Origin Policy) ์ •์ฑ…์ด๋‹ค. ํ•˜์ง€๋งŒ SOP ์ •์ฑ…์€ ์˜ค๋กœ์ง€ ๋™์ผํ•œ ์ถœ์ฒ˜์—์„œ๋งŒ ๋ฆฌ์†Œ์Šค๋ฅผ ๊ณต์œ ํ• ์ˆ˜ ์žˆ์–ด, ๊ธ€๋กœ๋ฒŒํ•œ ์ธํ„ฐ๋„ท ํ™˜๊ฒฝ์—์„  ์ด๋Š” ๋„ˆ๋ฌด ์ œํ•œ์ ์ด๋ผ๋Š” ๋‹จ์ ์ด ์กด์žฌํ–ˆ๋‹ค. ๋”ฐ๋ผ์„œ ์„œ๋น„์Šค ์ฐจ์›์—์„œ ๋ช‡๋ช‡์€ ๋‹ค๋ฅธ ์ถœ์ฒ˜๋ผ๋„ ๋ฆฌ์†Œ์Šค ๊ณต์œ ๋ฅผ ํ—ˆ์šฉํ•ด ์ฃผ๊ฒ ๋‹ค๋Š” ๊ฒƒ์ด ๋ฐ”๋กœ CORS(Cross Origin Resource Sharing) ์ •์ฑ…์ด๋‹ค. [WEB] ๐Ÿ“š ์•…๋ช… ๋†’์€ CORS ๊ฐœ๋… & ํ•ด๊ฒฐ๋ฒ• - ์ •๋ฆฌ ๋ํŒ์™• ๐Ÿ‘ ์•…๋ช… ๋†’์€ CO..

category_image
์ธํŒŒ_
2022.11.28
6
WEB ์ง€์‹

๐ŸŒ ์•…๋ช… ๋†’์€ CORS ๊ฐœ๋… & ํ•ด๊ฒฐ๋ฒ• - ์ •๋ฆฌ ๋ํŒ์™• ๐Ÿ‘

์•…๋ช… ๋†’์€ CORS ์—๋Ÿฌ ๋ฉ”์„ธ์ง€ ์›น ๊ฐœ๋ฐœ์„ ํ•˜๋‹ค๋ณด๋ฉด ๋ฐ˜๋“œ์‹œ ๋งˆ์ฃผ์น˜๋Š” ๋ฉ๋ฉ ๊ฐ™์€ ์—๋Ÿฌ๊ฐ€ ๋ฐ”๋กœ CORS ์ด๋‹ค. ์›น ๊ฐœ๋ฐœ์˜ ์‹ ์ž… ์‹ ๊ณ ์‹์ด๋ผ๊ณ  ํ•  ์ •๋„๋กœ, CORS๋Š” ๋ˆ„๊ตฌ๋‚˜ ํ•œ ๋ฒˆ ์ •๋„๋Š” ๊ฒช๊ฒŒ ๋œ๋‹ค๊ณ  ํ•ด๋„ ๊ณผ์–ธ์ด ์•„๋‹ˆ๋‹ค. ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž ์ž…์žฅ์—์„  ์š”์ฒญ ์ฝ”๋“œ๋ฅผ ์ด์ƒํ•˜๊ฒŒ ์ ์€๊ฒƒ๋„ ์•„๋‹ˆ๊ณ , ๋ฐฑ์—”๋“œ ๊ฐœ๋ฐœ์ž ์ž…์žฅ์—์„  ์„œ๋ฒ„ ์ฝ”๋“œ๋‚˜ ์„ธํŒ…์ด ์ด์ƒํ•œ๊ฒƒ๋„ ์•„๋‹ˆ๋‹ค. ๋ชจ๋“ ๊ฒŒ ๋ฉ€์ฉกํ•œ๋ฐ ์™œ ์š”์ฒญํ•œ ์ž๋ฃŒ์— ๋Œ€ํ•œ ์‘๋‹ต์„ ์‹œ๋ป˜๊ฑด ์—๋Ÿฌ์ค„๋กœ ํ™•๋‹ตํ•˜๋Š”๊ฒŒ ๋ฌธ์ œ์ด๋‹ค. ๐Ÿคฌ ์ด๋Ÿฌํ•œ ํ˜„์ƒ์ด ์ผ์–ด๋‚˜๋Š” ์ด์œ ๋Š”, ์›น ๋ธŒ๋ผ์šฐ์ €๋Š” HTTP ์š”์ฒญ์— ๋Œ€ํ•ด์„œ ์–ด๋–ค ์š”์ฒญ์„ ํ•˜๋Š๋ƒ์— ๋”ฐ๋ผ ๊ฐ๊ธฐ ๋‹ค๋ฅธ ํŠน์ง•์„ ๊ฐ€์ง€๊ณ  ์žˆ๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค. ์š”์ฒญ ๋ฐฉ์‹์— ๋”ฐ๋ผ ๋‹ค๋ฅธ CORS ๋ฐœ์ƒ ์—ฌ๋ถ€ 1. , , 2. XMLHttpRequest, Fetch API ์Šคํฌ๋ฆฝํŠธ โ†’ ๊ธฐ๋ณธ์ ์œผ๋กœ Same-Or..

category_image
์ธํŒŒ_
2022.11.28
90
WEB ์ง€์‹

๐Ÿช CORS ์ฟ ํ‚ค ์ „์†กํ•˜๊ธฐ (withCredentials ์˜ต์…˜)

๐Ÿคฌ CORS๋ฅผ ํ—ˆ์šฉํ–ˆ๋Š”๋ฐ๋„ ์ฟ ํ‚ค๊ฐ€ ๋„˜์–ด๊ฐ€์ง€ ์•Š๋Š” ํ˜„์ƒ ๋ณดํ†ต ์›น์„ ๊ตฌ์„ฑํ• ๋•Œ ๋ฆฌ์•กํŠธ(React)๋‚˜ ๋ทฐ(Vue)์™€ ๊ฐ™์€ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ / ํ”„๋ ˆ์ž„์›Œํฌ๋ฅผ ์‚ฌ์šฉํ•œ๋‹ค๋ฉด ๋”ฐ๋กœ ํ”„๋ก ํŠธ ์„œ๋ฒ„๋ฅผ ์‹คํ–‰ํ•˜์—ฌ ๊ฐœ๋ฐœํ•˜๊ฒŒ ๋œ๋‹ค. ๋งŒ์ผ ํด๋ผ์ด์–ธํŠธ ์„œ๋ฒ„๊ฐ€ http://localhost:3000 ์ด๊ณ  API ์„œ๋ฒ„๊ฐ€ http://localhost:8080 ์ด๋ผ๊ณ  ๊ฐ€์ •ํ•˜์ž. ์„œ๋กœ ๊ฐ™์€ Host์ด๊ณ  Port๋งŒ ๋‹ค๋ฅธ ์…ˆ์ด๋‹ค. ๋กœ๊ทธ์ธ ํ™”๋ฉด์„ ๊ตฌ์„ฑ์„ ์™„๋ฃŒํ–ˆ๊ณ  ํ…Œ์ŠคํŠธ๋ฅผ ์œ„ํ•ด axios๋กœ ๋กœ๊ทธ์ธ ์š”์ฒญ์„ ์„œ๋ฒ„์— ๋ณด๋ƒˆ๋‹ค. axios.post('http://localhost:8080/login', { profile: { username: username, password: password } }) ํ•˜์ง€๋งŒ ๊ฒฐ๊ณผ๋Š” ๋กœ๊ทธ์ธ ์„ฑ๊ณต์ด ์•„๋‹Œ ๋‹ค์Œ๊ณผ ๊ฐ™์€ ์‹œ๋ป˜๊ฑด CORS ..

category_image
์ธํŒŒ_
2022.07.18
6
Node Package

[NODE] ๐Ÿ“š cors ๋ชจ๋“ˆ - CORS ๊ฐ„ํŽธ ์„ค์ •ํ•˜๊ธฐ

CORS ํ—ˆ์šฉ ์„ค์ • ํ•˜๋Š” ๋ฐฉ๋ฒ• Node.js ์„œ๋ฒ„ ํ”„๋กœ์ ํŠธ์—์„œ cors(cross origin resource sharing) ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•˜๋Š” ๋ฐฉ๋ฒ•์€ ํฌ๊ฒŒ 2๊ฐ€์ง€๊ฐ€ ์žˆ๋‹ค. ํ•˜๋‚˜๋Š” ์ง์ ‘ ํ—ค๋”๋ฅผ ๋ช…์‹œํ•ด์„œ ์ถœ์ฒ˜(origin)์„ ํ•„ํ„ฐ๋งํ•˜๋Š” ๊ฒƒ์ด๊ณ , ๋‹ค๋ฅธ ํ•˜๋‚˜๋Š” cors ๋…ธ๋“œ ํŒจํ‚ค์ง€๋ฅผ ์‚ฌ์šฉํ•ด ์ข€๋” ๊ฐ„ํŽธํ•˜๋ฉด์„œ ์œ ๊ธฐ์ ์œผ๋กœ ์ถœ์ฒ˜๋ฅผ ํ•„ํ„ฐ๋ง ํ• ์ˆ˜ ์žˆ๋‹ค. 1. ์ง์ ‘ ํ—ค๋”์— ๋ช…์‹œ CORS ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” ์‘๋‹ต ํ—ค๋”์— Access-Control-Allow-Origin ํ—ค๋”๋ฅผ ๋„ฃ์–ด์•ผ ํ•œ๋‹ค. ์ด ํ—ค๋”๋Š” ํด๋ผ์ด์–ธํŠธ ๋„๋ฉ”์ธ์˜ ์š”์ฒญ์„ ํ—ˆ๋ฝํ•˜๊ฒ ๋‹ค๋Š” ๋œป์„ ๊ฐ€์ง€๊ณ  ์žˆ๋‹ค. //^ CORS ํ—ˆ์šฉ res.setHeader('Access-Control-Allow-origin', '*'); res.setHeader('Access-Contro..

category_image
์ธํŒŒ_
2022.01.16
3