🌱[WEB] CORS

🚨CORS 에러

Vue와 .NET 사이의 통신을 사용한 개발을 하던 중 CORS 에러가 발생했습니다. CORS 에러를 해결하기 위해 CORS에 대해 알아보며 정리한 내용들을 공유하려 합니다.

---

우선 CORS에 대해 알아보기 전 SOP (Same Origin Policy) 에 대해 알아보겠습니다.

✨SOP (Same Origin Policy)

다른 *출처의 resource 사용에 대한 제한을 두는 보안 방식
*출처: 프로토콜, 호스트, 포트가 같으면 동일 출처

제한하는 이유?

만약 은행사이트에 로그인하여 인증토큰을 받은 후, 다른 사이트에 들어간다면 그 토큰이 첨부되어 보내질 수 있습니다. 보안상으로 매우 좋지 않겠죠? 그렇기에 다른 출처간의 resource 사용에 제한을 두는 것입니다.

---

최근에는 프론트 개발과 백 개발의 분리로 api를 사용하여 개발하는 경우가 많아 졌습니다. 이로 인해 서로 다른 출처 간의 통신을 해야하는데요! 이를 위해 CORS가 필요합니다.

✨CORS (Cross-Origin Resource)

HTTP 헤더를 이용하여 서로 다른 출처의 resouce 접근이 가능하도록 브라우저에게 알려주는 것.

CORS 요청의 종류

1. Simple Request
2. Preflight Request
3. Credntialed Request

1. Simple Request

다음의 조건을 만족하면 Simple Request를 보낼 수 있습니다.

1) GET, POSTT, HEAD
2) POST 방식일 경우 conte-type이 아래 셋 중 하나여야 함.

• application/x-www-form-unlencoded
• multipart/form-data
• text/plain

3) Header는 Accept, Accept-Language, Content-Language, Content-Type만 적용

2. Preflight Request

[Preflight Request 과정]

1) OPTIONS 메서드를 통해 다른 도메인의 resource에 요청이 가능한지 확인 작업
2) 요청 가능하다면 실제 요청(Actual Request) 보내기

3. Credentialed Request

인증관련 Header를 포함할 때 사용

서버

Access-Control-Allow-Credential : true
Access-Control-Allow-Origin : "http://localhost:8081"

🚨주의
Access-Control-Allow-Origin : "*" 를 할 경우 에러가 발생합니다. 꼭 "http://localhost:8081" 와 같은 정확한 주소를 매핑해 주어야 합니다.

🚨CORS ERROR 해결

1. 클라이언트에서 해결하기

1) 웹 브라우저 실행 옵션이나 플러그인을 통한 SOP 회피하기
- SOP는 브라우저에서 임의로 하는 것이기 때문에 브라우저에서 SOP를 사용하지 않으며 됩니다.

2) json 방식으로 json 데이터 가져오기
- 자바스크립트 파일이나 css 파일은 SOP에 영향을 받지 않고 가져올 수 있습니다. 자바스크립트 파일을 json 형식으로 파싱헤 데이터를 사용할 수 있습니다.

2. 서버에서 해결하기

.NET을 이용하여 허용할 주소를 매핑합니다.