You Can Become A
๋ฆ๊ฒ ์์ํด๋ ๋๊ตฌ๋ ์ง ๋ ธ๋ ฅํ๋ฉด ๊ฐ๋ฐ์๊ฐ ๋ ์ ์์ด์ !
cors
๐ ํฌ๋กฌ ๋ธ๋ผ์ฐ์ 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) ํ๊ณ ๋ธ๋ผ์ฐ์ ๊ฐ ์์ฒญ์ ์น์ธํ ๊ฒฝ์ฐ์๋ง, ๊ณต๊ณต ์น์ฌ์ดํธ์์ ์ฌ์ค ๋คํธ์ํฌ ์๋ฒ์ ๋ฆฌ์์ค์ ์์ธ์ค๊ฐ ๊ฐ๋ฅํ๊ณ ๊ทธ๋ ์ง ์..
๐ 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..
๐ ์ ๋ช ๋์ CORS ๊ฐ๋ & ํด๊ฒฐ๋ฒ - ์ ๋ฆฌ ๋ํ์ ๐
์ ๋ช ๋์ CORS ์๋ฌ ๋ฉ์ธ์ง ์น ๊ฐ๋ฐ์ ํ๋ค๋ณด๋ฉด ๋ฐ๋์ ๋ง์ฃผ์น๋ ๋ฉ๋ฉ ๊ฐ์ ์๋ฌ๊ฐ ๋ฐ๋ก CORS ์ด๋ค. ์น ๊ฐ๋ฐ์ ์ ์ ์ ๊ณ ์์ด๋ผ๊ณ ํ ์ ๋๋ก, CORS๋ ๋๊ตฌ๋ ํ ๋ฒ ์ ๋๋ ๊ฒช๊ฒ ๋๋ค๊ณ ํด๋ ๊ณผ์ธ์ด ์๋๋ค. ํ๋ก ํธ์๋ ๊ฐ๋ฐ์ ์ ์ฅ์์ ์์ฒญ ์ฝ๋๋ฅผ ์ด์ํ๊ฒ ์ ์๊ฒ๋ ์๋๊ณ , ๋ฐฑ์๋ ๊ฐ๋ฐ์ ์ ์ฅ์์ ์๋ฒ ์ฝ๋๋ ์ธํ ์ด ์ด์ํ๊ฒ๋ ์๋๋ค. ๋ชจ๋ ๊ฒ ๋ฉ์ฉกํ๋ฐ ์ ์์ฒญํ ์๋ฃ์ ๋ํ ์๋ต์ ์๋ป๊ฑด ์๋ฌ์ค๋ก ํ๋ตํ๋๊ฒ ๋ฌธ์ ์ด๋ค. ๐คฌ ์ด๋ฌํ ํ์์ด ์ผ์ด๋๋ ์ด์ ๋, ์น ๋ธ๋ผ์ฐ์ ๋ HTTP ์์ฒญ์ ๋ํด์ ์ด๋ค ์์ฒญ์ ํ๋๋์ ๋ฐ๋ผ ๊ฐ๊ธฐ ๋ค๋ฅธ ํน์ง์ ๊ฐ์ง๊ณ ์๊ธฐ ๋๋ฌธ์ด๋ค. ์์ฒญ ๋ฐฉ์์ ๋ฐ๋ผ ๋ค๋ฅธ CORS ๋ฐ์ ์ฌ๋ถ 1. , , 2. XMLHttpRequest, Fetch API ์คํฌ๋ฆฝํธ โ ๊ธฐ๋ณธ์ ์ผ๋ก Same-Or..
๐ช 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 ..
[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..