SOP๊ฐ ๋ฌด์์ด๊ณ ์ ์๊ฒผ๋์ง, SOP์ ๋ฐ๋์ธ CORS์ ์ญํ ์ด ๋ฌด์์ด๊ณ ์ด๋ป๊ฒ ์ค์ ํ๋์ง์ ๋ํด ํ์ตํ๋ค.
ex) http://www.jieun.com:443/name
์ถ์ฒ(origin) : http://www.jieun.com:443/name
ํ๋กํ ์ฝ : http
ํฌํธ : 443
- ์ถ์ฒ๋ ํ๋กํ ์ฝ, ํธ์คํธ, ํฌํธ์ ์กฐํฉ์ ๊ตฌ์ฑ๋์ด ์๋ค.
- ์ด์ค ํ๋๋ผ๋ ๋ค๋ฅด๋ฉด ๋์ผํ ์ถ์ฒ๋ก ๋ณด์ง ์๋๋ค.
SOP์ผ๋ก ์ธํด ๋ค๋ฅธ ์ถ์ฒ์ ๋ฆฌ์์ค๋ฅผ ๋ฐ์ ์ฌ ์ ์๊ฒ ๋์๋๋ฐ ๋ง์ฝ ๋ค๋ฅธ ์ถ์ฒ์ ๋ฆฌ์์ค๋ฅผ ๋ฐ์์์ผํ๋ ์ํฉ์ด ์จ๋ค๋ฉด? (์ธ๋ถ API ๋ฑ)
OPTIONS
๋ฉ์๋๋ก ์ฌ์ ์์ฒญ์ ๋ณด๋ด ํด๋น ์ถ์ฒ ๋ฆฌ์์ค์ ์ ๊ทผ ๊ถํ์ด ์๋์ง ๋ถํฐ ํ์ธ ํ๋ ๊ฑฐAccess-Control-Allow-Origin
์ผ๋ก ์์ฒญ์ ๋ณด๋ธ ์ถ์ฒ๊ฐ ๋์์ค๋ฉด ์ค์ ์์ฒญ์ ๋ณด๋ด๊ฒ ๋๋ค.ํ๋ฆฌํ๋ผ์ดํธ โก๏ธ [์์ฒญ] โก๏ธ
Access-Control-Allow-Origin
โก๏ธ [์๋ต] โก๏ธ ์ค์ ์์ฒญ ๋ณด๋ด๊ธฐ
CORS์ ๋๋น๊ฐ ๋์ด์์ง ์๋ ์๋ฒ๋ผ๋ ํ๋ฆฌํ๋ผ์ดํธ ์์ฒญ์ ๋จผ์ ๋ณด๋ด๊ฒ ๋๋ฉด, ํ๋ฆฌํ๋ฆฌ์ํธ ์์ฒญ์์ CORS ์๋ฌ๋ฅผ ๋์ฐ๊ฒ ๋๋ค.
CORS ๊ธฐ๋ณธ ์ฌ์ : ํ๋ฆฌํ๋ผ์ดํธ ์์ฒญ
- ํ๋ก ํธ ์ธก์์ ์์ฒญ ํค๋:
withCredentials: ture
- ์๋ฒ์ธก์์ ์๋ต ํค๋ :
Access-Controll-Allow-Credentials:true
- ์๋ฒ ์ธก์์
Access-Control-Allow-Origin
์ ์ค์ ํ ๋ ๋ชจ๋ ์ถ์ฒ๋ฅผ ํ์ฉํ๋ค๋ ๋ป์์์ผ๋ ์นด๋(*)
๋ก ์ค์ ํด ์ค์ผ ํ๋ค.
const http = require ("http");
const server = http.createServer((request, response) => {
//1. ๋ชจ๋ ๋๋ฉ์ธ
response.setHeader("Access-Control-Allow-Origin", "*");
//2. ํน์ ๋๋ฉ์ธ
response.setHeader("Access-Control-Allow-Origin", "http://Jieun.com")
//3. ์ธ์ฆ ์ ๋ณด๋ฅผ ํฌํจํ ์์ฒญ์ ๋ฐ์ ๊ฒฝ์ฐ
response.setHeader("Access-Control-Allow-Origin", "true")
});
const cors = require("cors");
const app = express();
// 1. ๋ชจ๋ ๋๋ฉ์ธ
app.use(cors());
// 2. ํน์ ๋๋ฉ์ธ
const options = {
origin: "http://Jieun.com", // ์ ๊ทผ ๊ถํ์ ๋ถ์ฌํ๋ ๋๋ฉ์ธ
credentials: true, // ์๋ต ํค๋์ Access-Controll-Allow-Credentials ์ถ๊ฐ
optionsSuccessStates: 200, // ์๋ต ์ํ๋ฅผ 200์ผ๋ก ์ค์
};
app.use(cors(options));
// 3. ํน์ ์์ฒญ
app.get("/example/id", cors(), function (req, res, next) {
res.json({msg: "example"})
})
๋ค์ํ ๊ฐ๋ฐ ํ๊ฒฝ์์๋ ํค๋์ ๊ฐ์ ์ค์ ํ๋ ๋ฐฉ๋ฒ๋ง ์๋ฉด CORS ์ค์ ํ ์ ์๋ค.
node server/ํ์ผ ๊ฒฝ๋ก
npx nodemon server/ํ์ผ ๊ฒฝ๋ก
npx serve -l ํฌํธ๋ฒํธ client/
HTTP ํธ๋์ญ์ ํด๋ถ ๋ฐ๋ก๊ฐ๊ธฐ
๊ณผ์ ๋ฅผ ์งํํ๋ฉด์ ๋ถ๋ช
๋ง๊ฒ ์์ ํ๊ณ ์ ์ฅ๊น์ง ํ๋๋ฐ syntaxerr๊ฐ ๋์ ์ ๋ฅผ ๋จน์๋ค.
์๊ณ ๋ณด๋ ์๋ฒ ์ฝ๋๋ ์์ ํ ์ ์ฅํ์ ๋ ํ๋ก๊ทธ๋จ์ ๋งค๋ฒ ๋ค์ ์คํํด ์ค์ผํ๋ค.
์ฆ, ์๋ฒ ์ฝ๋๋ฅผ ์์ ํ์ ๋ ํด๋น ๊ฒฝ๋ก ํฐ๋ฏธ๋์ node server/ํ์ผ ๊ฒฝ๋ก
๋ฅผ ๋งค๋ฒ ์คํํด ์ฃผ๋ฉด ํด๊ฒฐ๋๋ค.
๋๋ฌด ์ด๋ ต๊ฒ ์๊ฐํด์ ์๊ฐ์ ์ก์๋ ๊ฑฐ ๊ฐ๋ค.