\(@^0^@)/
[์ด๋ก ] CORS & CORS ERROR ๋ณธ๋ฌธ
๐ฅ CORS?
๋ค๋ฅธ ๋๋ฉ์ธ(domains (en-US))์์์ ์์์ ํธ์ถํ๋ ํ์์ ์ ํ์ด ์์ ๊ฒฝ์ฐ ์์ ํ์ง ์์ต๋๋ค.
CORS (Cross-Origin Resource Sharing)๋ ์ด๋ ๊ฒ ์์คํ ์์ค์์ ํ ๋๋ฉ์ธ ๊ฐ ์์ ํธ์ถ์ ์น์ธํ๊ฑฐ๋ ์ฐจ๋จํ๋ ๊ฒ์ ๊ฒฐ์ ํ๋ ๊ฒ์ ๋๋ค.
[ ์ถ์ฒ : https://developer.mozilla.org/ko/docs/Glossary/CORS ]
Client - localhost:3000
Server - localhost:4000์ด๋ผ๋ฉด
port ๋ฒํธ๊ฐ ๋ค๋ฅด๊ธฐ ๋๋ฌธ์ ๋น์ฐํ ๋ ์๋ฒ์ Origin์ด ๋ค๋ฅด๋ค.
ex) naver.com์ google.com์ Origin์ ๋ค๋ฅด๋ค.
๊ทธ๋์ ์๋ก์ origin์ด ๋ค๋ฅด๋ฉด ์์์ ํธ์ถํ ์ ์๋ ๊ฒ์ด ๋น์ฐํ๋ค.
[ ์ถ์ฒ : https://www.youtube.com/watch?v=d6suykcsNeY ]
๐ฅ CORS ERROR?
CORS ์ค์ ์ด ์ ๋๋ก ์ธํ ๋์ด ์์ง ์๋ค๋ฉด, ๋ธ๋ผ์ฐ์ ์ฝ์์๋ ๋ค์๊ณผ ๊ฐ์ ๋ฉ์์ง๊ฐ ํ์๋๋ค.
"Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at $somesite"
ํด๋น ๋ฉ์์ง๋ CORS ๋ณด์ ๊ท์น ์๋ฐ์ผ๋ก ์ธํด ์์ฒญ์ด ์ฐจ๋จ๋์๋ค๋ ์๋ฏธ๋ก,
ํด๋ผ์ด์ธํธ๋ ์๋ฒ์๊ฒ ์์์ ์๊ตฌํด๋ origin์ด ๋ค๋ฅด๋ฉด Cors ์ ์ฑ
์ ์ํด ์ฐจ๋จํ๋ฉด์ Cors Error๊ฐ ๋ฐ์ํ๋ ๊ฒ!
ํด๋ผ์ด์ธํธ๊ฐ ์๋ฒ์ ๋ฐ์ดํฐ๋ฅผ ๊บผ๋ด๊ฐ๊ณ ์์ฒญ์ ํ๋ ๊ฒ์ด๊ธฐ ๋๋ฌธ์,
๊ฒฐ๊ตญ Cors Error๋ฅผ ํด๊ฒฐํ๊ธฐ ์ํด์๋ ์๋ฒ์์ Cors์ ์ ์ฑ
์ ํ์ฉํด์ผ ํจ.
๐
CORS ์ค์ ๋ฐฉ๋ฒ
1๏ธโฃ ์๋ฒ์์ Cors์ ์ ์ฑ ํ์ฉ์ ์ํ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์ค์น
npm์์ cors ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ๊ฒ์ํ์ฌ ์ค์น ํ, ์ฌ์ฉ๋์ ์ฝ๋๋ฅผ ๋ณต๋ถ ํ์ฌ ์
๋ง์ ๋ง๊ฒ ์ฌ์ฉํ๋ฉด ๋๋ค.
https://www.npmjs.com/package/cors
// cors ์ค์น
$ npm install cors
/* cors ์ฌ์ฉ๋ฐฉ๋ฒ */
// cors import
const cors = require('cors')
// ๊ดํธ์์ ์๋ฌด๊ฒ๋ ๋ฃ์ง ์์ ๊ฒฝ์ฐ, ์ด๋ค origin์ด๋ ๋ฐ์ดํฐ๋ฅผ ๊บผ๋ด๊ฐ ์ ์๋ค๋ ๋ป.
app.use(cors())
json-server๋ก ๋ง๋ ์๋ฒ์ ๊ฒฝ์ฐ์ ๋ชจ๋ ๋๋ฉ์ธ์ ํ์ฉํด์ฃผ๋ CORS ๊ท์น์ด ์ ์ฉ๋์ด์๋ค.
ํ์ง๋ง, Open API๋ฅผ ๋ง๋๋ ๊ฒ ์๋๋ผ๋ฉด ๋ชจ๋ ๋๋ฉ์ธ์ ํ์ฉํ๋ฉด ์ ๋จ. ํน์ ๋๋ฉ์ธ๋ง ํ์ฉ์ ํด์ฃผ์ด์ผ ํ๋ค.
2๏ธโฃ ์นํฉ ๊ฐ๋ฐ์๋ฒ์์ ์ ๊ณตํ๋ Proxy๋ผ๋ ๊ธฐ๋ฅ ์ด์ฉ
์นํฉ ๊ฐ๋ฐ์๋ฒ์ ํ๋ก์๋ฅผ ์ฌ์ฉํ๊ฒ ๋๋ฉด, ๋ธ๋ผ์ฐ์ API๋ฅผ ์์ฒญํ ๋ ๋ฐฑ์๋ ์๋ฒ์ ์ง์ ์ ์ผ๋ก ์์ฒญ์ ํ์ง ์๊ณ ,
ํ์ฌ ๊ฐ๋ฐ์๋ฒ์ ์ฃผ์๋ก ์์ฒญ์ ํ๊ฒ ๋๋ค.
๊ทธ๋ฌ๋ฉด ์นํฉ ๊ฐ๋ฐ ์๋ฒ์์ ํด๋น ์์ฒญ์ ๋ฐ์ ๊ทธ๋๋ก ๋ฐฑ์๋ ์๋ฒ๋ก ์ ๋ฌํ๊ณ , ๋ฐฑ์๋ ์๋ฒ์์ ์๋ตํ ๋ด์ฉ์ ๋ค์ ๋ธ๋ผ์ฐ์ ์ชฝ์ผ๋ก ๋ฐํํ๋ค.
์นํฉ ๊ฐ๋ฐ์๋ฒ์ proxy ์ค์ ์ ์๋ ์นํฉ ์ค์ ์ ํตํด์ ์ ์ฉ์ ํ์ง๋ง, CRA๋ฅผ ํตํด ๋ง๋ ๋ฆฌ์กํธ ํ๋ก์ ํธ์์๋ package.json ์์ "proxy" ๊ฐ์ ์ค์ ํ์ฌ ์ฝ๊ฒ ์ ์ฉํ ์ ์๋ค.
json-server๋ก ๋ชจ์ API ์๋ฒ ๊ฐ์ json-server๋ฅผ ๋ง๋ค๊ฒฝ์ฐ์๋ Proxy๋ฅผ ์ด์ฉํด์ Cors๋ฅผ ํ์ฉํ ์ ์๋ค.
Proxy ๊ธฐ๋ฅ์ ์ด๋ค ์์ผ๋ก ํ์ฉํด์ผ ํ๋์ง ๊ฐ๋จํ๊ฒ ํ์ธํด๋ณด์.
123๋ฒ์งธ๋ก ์ ์ todo๊ฐ ๋ฌด์์ธ์ง ์๊ณ ์ถ๋ค๊ณ ๊ฐ์ .
ํด๋ผ์ด์ธํธ : http://localhost:3000/todo/123
์๋ฒ : http://localhost:4000/todo/123
$ npx json-server ./data.json --port 4000
๋์ ๊ฒฝ์ฐ์๋ port 4000์ผ๋ก json-server๋ฅผ ์ด ๊ฒ์ด๋ค.
/* package.json์์ proxy ๊ฐ ์ค์ */
"proxy": "http://localhost:4000"
package.json์์ ํด๋น ๊ฐ์ ์ค์ ํด์ฃผ๊ณ ,
import axios from 'axios';
export const getTodoByNum = async num => {
const response = await axios.get(`/todo/${num}`);
return response.data;
};
ํด๋น ํ์ผ์์ http://localhost:4000/todo ๋์ ์ /todo URL๋ก ์์ฒญ์ ํ ๊ฒฝ์ฐ ์ฃผ์์ ๋๋ฉ์ธ์ด ์๋ต๋ ๊ฒฝ์ฐ, ํ์ฌ ํ์ด์ง์ ๋๋ฉ์ธ์ ๊ฐ๋ฆฌํค๊ฒ ๋๋ค.
๋ค์ ๋งํ์๋ฉด, api ์์ฒญํ ๋ ์๋ http://localhost:4000/todo/${num} ๊ฐ์ ์ ์ฒด ๋๋ฉ์ธ์ ์ ์ด์ค์ผ ํ์ง๋ง,
์์ฒญํ๋ ์ฃผ์์ ๋๋ฉ์ธ์ด ์๋ต๋ ๊ฒฝ์ฐ์๋ ํด๋ผ์ด์ธํธ์ ํ์ฌ ํ์ด์ง ๋๋ฉ์ธ http://localhost:3000์ ๊ฐ๋ฆฌํค๊ฒ ๋๋ค.
ํด๋น ํ๋ก์ ํธ๋ฅผ ๋ฐฐํฌํ๋ ๊ฒฝ์ฐ, ๋ฆฌ์กํธ๋ก ๋ง๋ ์๋น์ค์ API๊ฐ ๋์ผํ ๋๋ฉ์ธ์์ ์ ๊ณต์ด ๋๋ ๊ฒฝ์ฐ์๋ ์์ ๊ฐ์ด ๊ณ์ ์งํ์ ํ๋ฉด ๋์ง๋ง, ๋ง์ฝ API์ ๋๋ฉ์ธ๊ณผ ์๋น์ค์ ๋๋ฉ์ธ์ด ๋ค๋ฅด๋ค๋ฉด axios์ ๊ธ๋ก๋ฒ baseURL์ ์ค์ ํ๋ฉด ๋๋ค.
์๋ฅผ ๋ค์ด ์๋น์ค๋ todo.com, API๋ today-todo.com์ด๋ผ๋ฉด index.js์ ๋ค์๊ณผ ๊ฐ์ด ์์ฑํ๋ฉด ๋๋ค.
axios.defaults.baseURL = process.env.NODE_ENV === 'development' ? '/' : 'https://today-todo.com/';
์์ ๊ฐ์ ์ค์ ์ ๋ง์ฝ ํ๊ฒ ๋๋ค๋ฉด,
๊ฐ๋ฐ ํ๊ฒฝ์์ ํ๋ก์ ์๋ฒ ์ชฝ์ผ๋ก ์์ฒญํ๊ณ , ํ๋ก๋์
์์ ์ค์ API ์๋ฒ๋ก ์์ฒญ์ ํ๊ฒ ๋๋ค.
CORS ์ค์ ๋ฐฉ๋ฒ์ 2๋ฒ์งธ์ธ Proxy๋ผ๋ ๊ธฐ๋ฅ์ ์ฌ์ฉํ๋ ๊ฒ์ ํ์์ ์ธ ๊ฑด ์๋์ง๋ง,
์ฌ์ฉํ๊ฒ ๋๋ฉด ๋ฐฑ์๋ ์ชฝ์์ CORS ์ค์ ์ ์ ํด๋ ๋๋๊น ๊ฝค๋ ์ ์ฉํ ๊ธฐ๋ฅ์ด๋, ๋ค์์ ํ๋ฒ ํ์ฉํด๋ณด๋ฉด ์ข์ ๊ฒ ๊ฐ๋ค.
[ ์ถ์ฒ : https://react.vlpt.us/redux-middleware/09-cors-and-proxy.html ]