CORS : Cross-Origin Resource Sharing
๊ต์ฐจ ์ถ์ฒ ๋ฆฌ์์ค ๊ณต์ ๋ ์ถ๊ฐ HTTP ํค๋๋ฅผ ์ฌ์ฉํ์ฌ, ํ ์ถ์ฒ์์ ์คํ ์ค์ธ ์น ์ ํ๋ฆฌ์ผ์ด์
์ด ๋ค๋ฅธ ์ถ์ฒ์ ์ ํํ ์์์ ์ ๊ทผํ ์ ์๋ ๊ถํ์ ๋ถ์ฌํ๋๋ก ๋ธ๋ผ์ฐ์ ์ ์๋ ค์ฃผ๋ ์ฒด์ ์ด๋ค.
์ ์์ ์ธ ๊ณผ์ ์์ด React๋ Webpack Dev Server์ proxy ๊ธฐ๋ฅ์ ์ฌ์ฉํ๋ฉด CORS ์ ์ฑ ์ ์ฐํํ ์ ์๋ค. ๋ณ๋์ ์๋ต ํค๋๋ฅผ ๋ฐ์ ํ์ ์์ด ๋ธ๋ผ์ฐ์ ๋ React ์ฑ์ผ๋ก ๋ฐ์ดํฐ๋ฅผ ์์ฒญํ๊ณ , ํด๋น ์์ฒญ์ ๋ฐฑ์๋๋ก ์ ๋ฌํ๋ค.
์ง์ ์ธํฐ๋ท์ ์ฐ๊ฒฐํ์ง ์๊ณ , ํ๋ก์ ์๋ฒ๋ฅผ ํตํด ์์ฒญ์ ๋ณด๋ด๊ธฐ ๋๋ฌธ์
ํด๋ผ์ด์ธํธ์ ์๋ฒ ์ฌ์ด์ ์ง์ ์ ์ธ ์ฐ๊ฒฐ์ ๋ง์ ๋ณด์์์ ์ด์ ์ ์ป์ ์ ์๋ค.
proxy ์ ์ฉ ์ ํ๋ฆ
proxy ์ ์ฉ ํ ํ๋ฆ
React ์ฑ์์ API๋ฅผ ์์ฒญํ ๋, proxy๋ฅผ ์ฌ์ฉํ์ฌ ๋ฐฑ์๋ ์๋ฒ๋ก ์์ฒญ์ ๋ณด๋ด๊ณ , ๋ฐ์ ์๋ต์ ๋ฐฑ์๋ ์๋ฒ ๋์ ๋ธ๋ผ์ฐ์ ์๊ฒ ์ ๋ฌํ๋ค. ์ด๋ ๊ฒ ํ๋ฉด ์ถ์ฒ๊ฐ ๊ฐ์์ ธ์ ๋ธ๋ผ์ฐ์ ๋ ์ด ์ฌ์ค์ ๋ชจ๋ฅด๊ณ CORS ์ ์ฑ ์ ์ฐํํ๊ฒ ๋๋ค.
webpack dev server์์ ์ ๊ณตํ๋ proxy ๊ธฐ๋ฅ์ด ์๋ค.
๋ธ๋ผ์ฐ์ ์์ ์์ฒญํ๋ API ์์ฒญ์ webpack dev server๊ฐ ๋ฐ์ ๋ฐฑ์๋ ์๋ฒ๋ก ์ ๋ฌํ๊ณ , ๋ฐฑ์๋ ์๋ฒ์์ ์๋ตํ ๋ด์ฉ์ ๋ค์ ๋ธ๋ผ์ฐ์ ๋ก ๋ฐํํ๋ ๊ธฐ๋ฅ์ด๋ค. ์ด๋ฅผ ํตํด ๋ธ๋ผ์ฐ์ ์์ ์ง์ API ์์ฒญ์ ๋ณด๋ด์ง ์๊ณ webpack dev server๊ฐ ๋์ ์์ฒญ์ ๋ณด๋ด์ด, CORS ์ ์ฑ ์ ์ฐํํ ์ ์๋ค.
โ CRA๋ก ๋ง๋ React๋ package.json์์ "proxy"๊ฐ์ ์ฝ๊ฒ ์ค์ ๊ฐ๋ฅํ๋ค.
/* package.json */
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"proxy" : "์ฐํํ API ์ฃผ์" // proxy๋ ๋งจ ๋ฐ์ ์์ฑ์ ํด ๊ธ๋ฐฉ ์ฐพ์ ์ ์๋๋ก ํ๊ธฐ
}
โ fetch๋ axios๋ฅผ ํตํด ์์ฒญํ๋ ๋ถ๋ถ์์ ๋๋ฉ์ธ ๋ถ๋ถ์ ์ ๊ฑฐํ๋ค.
/*
* export async function getAllfetch() {
* const response = await fetch('์ฐํํ api์ฃผ์/params');
* .then(() => {
* ...
* })
* }
*/
/* fetch๋ axios๋ฅผ ํตํด ์์ฒญํ๋ ๋ถ๋ถ์์ ๋๋ฉ์ธ ๋ถ๋ถ์ ์ ๊ฑฐ */
export async function getAllfetch() {
const response = await fetch('/params');
.then(() => {
...
})
}
webpack dev server์์ ์ ๊ณตํ๋ proxy๋ ์ ์ญ ์ค์ ์ด๊ธฐ ๋๋ฌธ์, ๋ชจ๋ ์์ฒญ์ ๋ํด ์ ์ฉ๋์ง ์๋ ๊ฒฝ์ฐ๊ฐ ์๊ธฐ๊ธฐ๋ ํ๋ค. ๊ทธ๋์ ์๋์ผ๋ก proxy๋ฅผ ์ ์ฉํด ์ค์ผ ํ๋ ๊ฒฝ์ฐ์๋ http-proxy-middleware ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ฌ์ฉํด์ผ ํ๋ค.
โ ์ค์น
// http-proxy-middleware ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์ค์น
npm install http-proxy-middleware --save
โ createProxyMiddleware
/* setupProxy.js */
// createProxyMiddleware ๊ฐ์ ธ์ค๊ธฐ
const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function(app) {
app.use(
"/api", // proxy๊ฐ ํ์ํ path prameter๋ฅผ ์
๋ ฅํ๋ค.
createProxyMiddleware({
target: "http://localhost:3080", // ํ๊ฒ์ด ๋๋ api url๋ฅผ ์
๋ ฅํ๋ค.
changeOrigin: true, // ๋์ ์๋ฒ ๊ตฌ์ฑ์ ๋ฐ๋ผ ํธ์คํธ ํค๋๊ฐ ๋ณ๊ฒฝ๋๋๋ก ์ค์ ํ๋ ๋ถ๋ถ์ด๋ค.
})
);
app.use(
"/api2",
createProxyMiddleware({
target: "http://localhost:3070",
changeOrigin: true,
})
);
/*
* ์ด๋ ๊ฒ ํ ๋ฒ์ ๋ฌถ์ด์ ์ฌ์ฉ๋ ๊ฐ๋ฅ
* app.use(
* ["/api", "/api2"],
* createProxyMiddleware({
* target: "http://localhost:3080",
* changeOrigin: true,
* router: {
* "/api2": "http://localhost:3070",
* },
* })
* );
*/
};
โ fetch๋ axios๋ฅผ ํตํด ์์ฒญํ๋ ๋ถ๋ถ์์ ๋๋ฉ์ธ ๋ถ๋ถ์ ์ ๊ฑฐํ๋ค.
export async function getAllBook() {
const response = await fetch('/api/book');
.then(() => {
...
})
}
export async function getAllTodos() {
const response = await fetch('/api2/todos');
.then(() => {
...
})
}