๐ฑ ์ธ๋ถ API ์ฌ์ฉํ๋ค๋ณด๋ฉด ์์ฃผ ๋ณด๋ ์๋ฌ CORS!
์ฌ์ค CORS ๋ฌธ์ ๊ฐ ์๋๋ผ SOP ๋ฌธ์ ์ด๋ฉฐ SOP ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ๊ธฐ ์ํ ๋ฐฉ๋ฒ์ด ๋ฐ๋ก CORS์ด๋ค!
Same-Origin Policy(๋์ผ ์ถ์ฒ ์ ์ฑ
)์ด๋ ๋ค๋ฅธ ์ถ์ฒ์์ ๊ฐ์ ธ์จ ๋ฆฌ์์ค์ ์ํธ์์ฉ์ ์ ํํ๋ ๋ณด์ ๋ฐฉ์์ด๋ฉฐ, ์ ์ฌ์ ์ผ๋ก ํด๋ก์ธ ์ ์๋ ๋ฆฌ์์ค๋ฅผ ์ ํํจ์ผ๋ก์จ ๊ณต๊ฒฉ๋ฐ์ ์ ์๋ ๊ฒฝ๋ก๋ฅผ ์ค์ด๊ธฐ ์ํด ์๊ฒจ๋ฌ๋ค.
์ฌ๊ธฐ์ ์ถ์ฒ(Origin)๋ ์๋์ ๊ฐ๋ค.
โ๏ธ ์ถ์ฒ๋ ํ๋กํ ์ฝ, ํธ์คํธ, ํฌํธ ์กฐํฉ์ผ๋ก ๋์ด์์ผ๋ฉฐ ์ด ์ค ํ๋๋ผ๋ ๋ค๋ฅผ ์ ๋์ผ ์ถ์ฒ๋ก ๋ณด์ง ์๋๋ค!
์๋ฅผ ๋ค์ด
1. ํ๋กํ ์ฝ์ด ๋ค๋ฅธ๊ฒฝ์ฐ
https://www.example.com
vs http://www.example.com
2. ํธ์คํธ๊ฐ ๋ค๋ฅธ ๊ฒฝ์ฐ
https://www.example.com
vs http://example.com
3. ํฌํธ๊ฐ ๋ค๋ฅธ ๊ฒฝ์ฐ
http://www.example.com
vs http://www.example.com:82
http๋ ๊ธฐ๋ณธ ํฌํธ๊ฐ 80์ด๋ฉฐ 82์ ๊ฐ์ง ์๊ธฐ ๋๋ฌธ์ ๋์ผ ์ถ์ฒ๊ฐ ์๋.
์ด๋ฌํ SOP ์ ์ฑ ์ผ๋ก ์ธํ ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ๊ธฐ ์ํด์๋ CORS ์ค์ ์ด ํ์ํ๋ค!
์ถ๊ฐ์ ์ธ HTTP ํค๋๋ฅผ ์ฌ์ฉํ์ฌ, ๋ค๋ฅธ ์ถ์ฒ์ ์์์ ์ ๊ทผํ ์ ์๋ ๊ถํ์ ๋ถ์ฌํ๋๋ก ๋ธ๋ผ์ฐ์ ์ ์๋ ค์ฃผ๋ ์ฒด์ ์ด๋ค.
์ฆ SOP์ ์ํด ๋งํ๋ ๋ค๋ฅธ ์ถ์ฒ์ ๋ฆฌ์์ค๊ฐ CORS๋ฅผ ์ฌ์ฉํ๋ฉด ์ ๊ทผํ ์ ์๋ค๋ ๊ฒ์ด๋ค!
์์ฃผ ๋ง์ฃผ์น๋ CORS ์๋ฌ๋ ํด์ํด๋ณด๋ฉด ๋ค์๊ณผ ๊ฐ๋ค.
๋ค๋ฅธ ์ถ์ฒ์ ๋ฆฌ์์ค๋ฅผ ๊ฐ์ ธ์ค๋ ค๊ณ ํ์ง๋ง SOP ๋๋ฌธ์ ์ ๊ทผ์ด ๋ถ๊ฐ๋ฅํฉ๋๋ค. CORS ์ค์ ์ ํตํด ์๋ฒ์ ์๋ต ํค๋์ 'Access-Control-Allow-Origin'์ ์์ฑํ๋ฉด ์ ๊ทผ ๊ถํ์ ์ป์ ์ ์์ต๋๋ค.
CORS๊ฐ ๋ค๋ฅธ ์ถ์ฒ์ ๋ฆฌ์์ค๋ฅผ ํ์ฉํ๋๋ก ์ค์ ํ๋ ๊ฒ์ ์ดํดํ์ง๋ง ๋ด๋ถ์ ์ผ๋ก ์ด๋ป๊ฒ ๋์ํ๋ ๊ฒ์ผ๊น?
CORS๋ ํฌ๊ฒ 3๊ฐ์ง์ ๋์ ๋ฐฉ์์ด ์กด์ฌํ๋ค.
์ค์ ์์ฒญ์ ๋ณด๋ด๊ธฐ ์ , OPTIONS ๋ฉ์๋๋ก ์ฌ์ ์์ฒญ์ ๋ณด๋ด ํด๋น ์ถ์ฒ ๋ฆฌ์์ค์ ์ ๊ทผ ๊ถํ์ด ์๋์ง ํ์ธํ๋ ์์ฒญ์ด๋ค.
๊ถํ์ด ์๋ค๋ฉด ์๋ต ํค๋์ Allow-Control-Allow-Origin
์ด ํฌํจ๋์ด ์๋ค.
๐ก Preflight ์์ฒญ์ด ํ์ํ ์ด์
- ์ค์ ์์ฒญ์ ์ฒ์๋ถํฐ ๋ณด๋ด๋ ๊ฒ๋ณด๋ค ๋ฆฌ์์ค ์ธก๋ฉด์์ ํจ์จ์
- CORS ๋๋น๊ฐ ๋์ด์์ง ์์ ์๋ฒ๋ฅผ ๋ณดํธ ๊ฐ๋ฅ.
(CORS๊ฐ ์๊ฒจ๋๊ธฐ ์ด์ ์ ๋ง๋ค์ด์ง ์๋ฒ๋ค์ SOP ์์ฒญ๋ง ๋ค์ด์ค๋ ์ํฉ์ ๊ณ ๋ คํ๊ณ ๋ง๋ค์ด์ ธ์๊ธฐ ๋๋ฌธ์ ๊ถํ์ด ์์์๋ ์ฐ์ ์์ฒญ์ด ์ฒ๋ฆฌ๋ ์ ์์)
=> ์ด๋ฌํ ์ด์ ๋ก Preflight ์์ฒญ์ CORS์ ๊ธฐ๋ณธ ์ฌ์์ผ๋ก ๋ค์ด๊ฐ๊ฒ ๋์์.
ํน์ ์กฐ๊ฑด์ด ๋ง์กฑ๋๋ฉด Preflight ์์ฒญ์ ์๋ตํ๊ณ ์์ฒญ์ ๋ณด๋ด๋ ๊ฒ์ ๋งํ๋ค.
์กฐ๊ฑด
์์ฒญ ํค๋์ ์ธ์ฆ ์ ๋ณด๋ฅผ ๋ด์ ๋ณด๋ด๋ ์์ฒญ์ด๋ค. ํ์ง๋ง ๋ฏผ๊ฐํ ์ ๋ณด๋ฅผ ๋ด๊ณ ์๊ธฐ ๋๋ฌธ์ ์ถ์ฒ๊ฐ ๋ค๋ฅผ ๊ฒฝ์ฐ ํ๋ก ํธ, ์๋ฒ ๋ชจ๋ CORS ์ค์ ์ด ํ์ํ๋ค.
withCredentials : true
์ถ๊ฐAccess-Control-Allow-Credentials : true
์ถ๊ฐAccess-Control-Allow-Origin
์ค์ ์ ์ถ์ฒ๋ฅผ ๋ช
ํํ๊ฒ ํด์ฃผ์ด์ผ ํ๋ค. ์ด ๋ ๋ชจ๋ ์ถ์ฒ๋ฅผ ํ์ฉํ๋ค๋ ๋ป์ ์์ผ๋์นด๋(*
)๋ก ์ค์ ํ ๊ฒฝ์ฐ ์๋ฌ๊ฐ ๋ฐ์ํ๋ค.ํ๋ก์ ์๋ฒ๋ฅผ ํตํด ์ฐํํ์ฌ ์ธ๋ถ๋ก ์์ฒญ์ ๋ณด๋์ผ๋ก์จ ํด๊ฒฐํ ์ ์์ผ๋ฉฐ, ๊ฐ๋จํ๊ฒ๋ ํ๊ฒ ์ถ์ฒ ์์ ํ๋ก์ ์๋ฒ URL์ ์ถ๊ฐํ์ฌ ์ฌ์ฉํ ์ ์๋ค.
https://cors-anywhere.herokuapp.com ์๋น์ค๋ฅผ ๊ฐ์ฅ ๊ฐ๋จํ๊ฒ ์ฌ์ฉํ ์ ์์์ผ๋ 2021.02๋ถํฐ๋ ํ ๋ฒ ๋ค์ด๊ฐ์ ํ์ฉ ๋ฒํผ์ ๋๋ฌ์ผ ๊ฐ๋ฅํ๋ค๊ณ ํ๋ฉฐ, cors-anywhere
ํ๋ก์ ํธ๋ฅผ forkํ์ฌ heroku์์ ํ๋ก์์๋ฒ๋ฅผ ๋ง๋ค ์๋ ์๋ค. ํค๋ก์ฟ (heroku)์ github ์ฐ๋ํด์ cors ํ๋ก์ ์๋ฒ ๋ง๋ค๊ธฐ(with cors-anywhere)
์ด ์ธ์๋ ๋ค์ํ ๋ฌด๋ฃ ํ๋ก์ ์๋ฒ๊ฐ ์กด์ฌํ๋ค.
http-proxy-middleware
๋ชจ๋์ ์ฌ์ฉํด ํ๋ก์ ์๋ฒ๋ฅผ ์ ์ฉํ ์๋ ์๋ค.
[React.js] Cross Domain ์ด์ ํด๊ฒฐํ๊ธฐ
ํ๊ฒ ์๋ฒ์ ์ ๊ทผํ ์ ์๋ ๊ฒฝ์ฐ๋ผ๋ฉด ์๋ฒ์์ ์๋ต ํค๋๋ฅผ ์ค์ ํ๋ค.
app.use((req, res, next) => {
// ๋ชจ๋ ๋๋ฉ์ธ
res.header("Access-Control-Allow-Origin", "*");
// ํน์ ๋๋ฉ์ธ
res.header("Access-Control-Allow-Origin", "https://codestates.com");
//์ธ์ฆ ์ ๋ณด๋ฅผ ํฌํจํ ์์ฒญ์ ๋ฐ์ ๊ฒฝ์ฐ
res.header("Access-Control-Allow-Credentials", true);
});
const cors = require("cors");
const app = express();
//๋ชจ๋ ๋๋ฉ์ธ
app.use(cors());
//ํน์ ๋๋ฉ์ธ
const options = {
origin: "https://codestates.com", // ์ ๊ทผ ๊ถํ์ ๋ถ์ฌํ๋ ๋๋ฉ์ธ
credentials: true, // ์๋ต ํค๋์ Access-Control-Allow-Credentials ์ถ๊ฐ
optionsSuccessStatus: 200, // ์๋ต ์ํ 200์ผ๋ก ์ค์
};
app.use(cors(options));
//ํน์ ์์ฒญ
app.get("/example/:id", cors(), function (req, res, next) {
res.json({ msg: "example" });
});
์ฐธ๊ณ ์๋ฃ
- ์ฝ๋์คํ ์ด์ธ UR Class ์๋ฃ