CORS

CORS (Cross Origin Resource Sharing) 란?

• 직역하면 '교차 출처 리소스 공유'
• CORS 는 웹 페이지 상의 제한된 리소스를 최초 자원이 서비스된 도메인 밖의 다른 도메인으로부터 요청할 수 있게 허용하는 구조임
• 웹페이지는 교차 출처 이미지, 스타일시트, 스크립트, iframe, 동영상을 자유로이 임베드할 수 있음
• 다만 특정 교차 도메인 간(cross-domain) 요청, 특히 Ajax 요청은 동일-출처 보안 정책에 의해 기본적으로 금지됨
• CORS는 교차 출처 요청을 허용하는 것이 안전한지 아닌지를 판별하기 위해 브라우저와 서버가 상호 통신하는 하나의 방법을 정의gka

CORS 는 왜 필요한가?

• 서로 다른 출처에 대해 데이터를 주고받을 수 없기 때문에 데이터를 주고받기 위해서 cors 설정이 필요함
• 모든 사이트에 대해 허락되게 설정하면,

모두에게 허용하기
app.use(cors()); 

• 보안상의 문제로 특정 주소에 한해서만 허락되게 설정하면,

특정 도메인에만 허용하기 
app.use(
	cors({
    	origin: ["http://127.0.0.1:5500"] })
        )

서버에서 콜스 허용하기 위해 설치와 import
> yarn add cors

import cors from "cors";

처음에는 이렇게 다 적었어야 가능한데 이제는 설치해서 위에 처럼만 해주면 됨.

출처:
https://ko.javascript.info/fetch-crossorigin
https://beomy.github.io/tech/browser/cors/
https://ko.wikipedia.org/wiki/%EA%B5%90%EC%B0%A8_%EC%B6%9C%EC%B2%98_%EB%A6%AC%EC%86%8C%EC%8A%A4_%EA%B3%B5%EC%9C%A0

---

(영문 해석)

What is CORS?

• Cross-origin resource sharing (CORS) is a browser mechanism which enables controlled access to resources located outside of a given domain.
• It extends and adds flexibility to the same-origin policy (SOP).
• However, it also provides potential for cross-domain attacks, if a website's CORS policy is poorly configured and implemented.
• CORS is not a protection against cross-origin attacks such as cross-site request forgery (CSRF).

• The CORS mechanism supports secure cross-origin requests and data transfers between browsers and servers.
• Modern browsers use CORS in APIs such as XMLHttpRequest or Fetch to mitigate the risks of cross-origin HTTP requests.

출처:
https://www.stackhawk.com/blog/what-is-cors/
https://portswigger.net/web-security/cors
https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS