[14week]

최종 수정 : 2024-06-08

Q. CORS 에러에 대해 설명하고, 어떻게 해결하면 될지 설명해 주세요.

# CORS(Cross Origin Resource Sharing)

한 도메인 또는 Origin의 웹 페이지가 다른 도메인을 가진 리소스에 엑세스할 수 있게 하는 보안 메커니즘이다. 이는 동일 출처 정책때문에 등장하게 됐다.

 

동일 출처 정책?

말 그대로 동일한 프로토콜, 호스트명, 포트의 리소스에만 접근하도록 제한하는 정책을 뜻한다. 동일 출처 정책의 경우에 브라우저에서 자동으로 쿠키가 첨부된다는 특징에서 해당 부분이 보안상의 문제를 발생시킬 수 있는 이슈로 생겨나게 되었고 이렇게 등장하게 된 출처 정책으로 인해 CORS가 발생하게 된다.

 

보안 뿐만 아니라 성능의 문제가 있다.

미러 사이트에서 CORS

CORS의 동작 원리

https://bohyeon-n.github.io/deploy/web/cors.html

CORS란? CORS를 해결해보자 | 구보현 블로그

 

해결방법

CORS가 어렵게 느꼊는 이유는 클라이언트와 서버, 양쪽 모두에서 문제가 발생한다는 점이다. 즉, 에러 자체는 프론트엔드에서 나타나지만 실질적인 해결은 백엔드에서 작업을 해야 하기 때문에 문제 원인을 파악하는 것도 어렵고 문제 해결도 어렵게 되는 것이다. 근본적으로는 서버에서 해결해주는 것이 옳다.

 

sol1) 다른 사람이 만든 프록시 서버 이용하기

요청해야 하는 URL 앞에 프록시 서버 URL을 붙여 요청하게 되면 해결할 수 있다. 
https://cors-anywhere/herouapp.com
해당 서버를 활용해서 요청을 가로채 HTTP 응답 헤더에 Accrss-Control-Allow-Origin: * 를 설정해 주면 된다. 다만, 속도가 느려질 수 있다. 

axois({
  method:"GET",
  url:`https://cors-anywhere/herokuapp.com/{URL},
  header:{
	'APIKey':'....'
  }
})

 

sol2) 클라이언트 : http-proxy-middleware 사용하기

http-proxy-middleware를 설치한 후에 setupProxy.js라는 파일을 src 폴더 내에 만들고 다음 코드를 작성한다.

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function (app) {
  app.use
    ("/api", createProxtMiddleware({
      target: 'http://localhost:3000',
      changeOrigin: true,
    })
  )
}

---

 

1. 클라이언트에서 해결

1) 웹 브라우저 실행 옵션이나 플러그인을 통한 동일 출처 정해 회피

- 동일 출처 정책은 브라우저에서 임의로 하는 것이기 때문에 브라우저에서 동일 출처 정책을 사용하지 않으면 된다.

 

2) JSON 방식으로 json 데이터 가져오기

- 자바스크립트 파일이나 CSS 파일은 동일 출처 정책에 양향을 받지 않고 가져올 수 있다.

- 이를 이용해서 자바스크립트 파일을 가져와서 이를 json 형식으로 파싱해서 데이터를 사용할 수 있다.

 

2. 서버에서 해결

스프링 CORS

@CorssOrigin 어노테이션 사용

- 메소드 레벨 및 글로벌 레벨에서 spring mvc 애플

 

---

Q. SEO가 무엇인지 설명하고, 개선을 위해 어떤 작업을 할 수 있을지 설명해 주세요.

https://wikidocs.net/197689

09) Next.js에서 성능 및 SEO 최적화

 

 

---

참고 자료

https://velog.io/@jh100m1/CORS-%EC%97%90%EB%9F%AC%EA%B0%80-%EB%AD%94%EB%8D%B0-%EC%96%B4%EB%96%BB%EA%B2%8C-%ED%95%B4%EA%B2%B0%ED%95%98%EB%8A%94%EA%B1%B4%EB%8D%B0

CORS 가 뭔데 CORS 에러 어떻게 해결하는건데