HTTP (Cross-Origin Resource Sharing)

CORS (교차 출처 리소스 공유)

🎆 MDN 정의

교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제입니다. 웹 애플리케이션은 리소스가 자신의 출처(도메인, 프로토콜, 포트)와 다를 때 교차 출처 HTTP 요청을 실행합니다.

 

음.. 쉽게 생각했을 때 그냥 주소가 다른 서버에서 요청이 왔을 때 무조건 다 허용을 해주면 안되니까 내가 허락한 도메인만 내 자원을 가져 갈 수 있도록 설정해 주는 역할이라고 생각하면 편할 거 같다 ! 

 

cors는 브라우저에서 임의로 설정하는 것 이지 브라우저를 통하지 않고 보내면 요청과 응답을 잘 받을 수 있다고 합니다.

 

사실 글로만 보면 이해가 잘 안되기 때문에 강제로 cors를 발생시켜서 눈으로 봐보겠습니다 ! 

 

CORS 발생시키기 

간단하게 express 로 백엔드를 만들어 줍니다 .

const express = require("express");

const app = express();

const port = 8000;

app.get("/", (req, res) => {
	res.send("Hello World!");
});

app.post("/", (req, res) => {
	console.log(req.method);
	res.json({ messeage: "CORS !!" });
});

app.listen(port, () => {
	console.log(`Example app listening on port ${port}`);
});

그리고 서버에 요청을 보낼 포트가 다른 프론트 서버를 만들어 줍니다.

import "./App.css";

function App() {
	async function handleClick() {
		const response = await fetch("http://localhost:8000/", {
			method: "POST",
			headers: {
				Accept: "application/json",
			},
		});
		console.log(response.json());
	}
	return (
		<div className="App">
			<button onClick={handleClick}>cors</button>
		</div>
	);
}

export default App;

 

그러면 이제 위에 두 코드는 프론트는 localhost:8000번으로 요청을 보내고 서버는 응답으로 CORS !! 라는 json파일을 

보내주는 코드 입니다 ! 

 

버튼을 눌러서 요청을 보내보면 ?? 

💥 짠 ~ cors오류가 발생합니다. (내 의도대로 오류가 나서 좋아하는 거임 !)

영어를 해석해 보면 이런 내용입니다 ! 

'http://localhost:3000'에서 'http://localhost:8000/' 가져오기에 대한 액세스가 CORS 정책에 의해 차단되었습니다. 요청한 리소스에 'Access-Control-Allow-Origin' 헤더가 없습니다. 불투명한 응답이 요구 사항을 충족하는 경우 요청 모드를 'no-cors'로 설정하여 CORS가 비활성화된 리소스를 가져옵니다.

✨정리✨

프론트는 : http://localhost:3000

백엔드는 : http://localhost:8000

 

결국 서로 다른 포트를 가진 두개의 서버가 서로 통신을 하려고 하는데 서버에서 cors 관련 설정을 해주지 않았기 때문에 

결국 에러가 발생하게 된 것 입니다.

 

위 설명을 보면 'Access-Control-Allow-Origin' 헤더가 없습니다. 라고 설명을 해줍니다. 

그러면 서버측에서 Access-Control-Allow-Origin'를 설정해 주면 될 거 같습니다. 

 

서버

res.setHeader("Access-Control-Allow-Origin", "http://localhost:3000");

응답을 내리기 전에 위 코드 한줄을 추가해 줍니다. "http://localhost:3000" 에 대한 요청은 허용을 해 주겠다는 코드 입니다.

 

이렇게 하고 다시 요청을 보내 보면 ?? 

이렇게 서버에서 응답을 내려준 코드가 cors에 막히지 않고 프론트까지 잘 전달된 것을 볼 수 있습니다. 

---

이거 말고도 express cors라는 모듈이 있습니다 .

이 모듈을 사용하면 cors를 쉽게 관리 할 수 있습니다. 

https://expressjs.com/en/resources/middleware/cors.html

Express cors middleware

 

🎈 추가 정리 ~ 

그러면 cors 요놈은 누가 발생시키는 걸 까 ? 서버 ? 브라우저 ? 

범인 색출을 해보도록 하겠습니다..

 

일단 서버에서 위에 정의했던 Access-Control-Allow-Origin' 를 제거 해줍니다. 

그러면 이제 브라우저는 cors 에 막히는 상황 입니다. 

여기서 브라우저가 아닌 다른 걸로 서버에 요청을 한다면 ? 

결국 cors란 녀석은 서버측이 아닌 브라우저에서 막는 정책으로 결론이 났습니다 ~