Access-Control-Allow-Origin(CORS 도메인 문제)

WIS·2021년 12월 8일
0

CORS
CORS란 Cross Origin Resource Sharing의 약자로,

현재 Application의 도메인(웹페이지)에서 다른 웹페이지 도메인으로 리소스가 요청되는 경우를 얘기합니다.
(도메인과 포트가 다른 서버로 client가 요청했을때 브라우저가 보안상 이유로 API를 차단하는 문제)

예를 들면, 웹페이지인 http://web.com 에서 API서버 URL인 http://api.com 도메인으로 API를 요청하면

http 형태로 요청이 되므로 브라우저 자체에서 보안 상 이유로 CORS를 제한하게 되는 현상을 말합니다.

error: 405 Method Not Allowed

SPA(Single Page Application) 기반 앱을 RESTful API연동 방식으로 개발을 하다보면 API 서버와 웹페이지서버가 각각 따로 운영이 되므로 CORS 문제에 항상 부딪히는 경우가 다반사입니다.

SameSite vs SameOrigin
https://stitchcoding.tistory.com/46

프록시 서버

시스템에 방화벽을 가지고 있는 경우 외부와의 통신을 위해 만들어 놓은 서버
프록시 서버는 프록시 서버에 요청된 내용들을 캐시를 이용하여 저장
인터넷에서 유저를 대신해서 데이터를 가져오는 서버
원래는 클라이언트가 서버에 직접 접근해서 요청한 내용을 가져와야 하지만 프록시 서버가 대신 서버에 요청하고 클라이언트에게 가져다 줍니다.

Proxy 서버의 목적

  1. 보안 : 익명의 사용자가 서버에 접근하는 것을 막는다.
  2. 속도 : Proxy 서버는 사용자의 요청을 Cache해서 동일 요청이 들어오면 Cache 자원을 반환한다. 이는 서비스의 속도를 높여준다.
  3. ACL : 사이트 접근에 대한 접근 정책을 정의할 수 있다.
    (ACL = Proxy Server에 접속할 수 있는 범위를 설정하는 옵션)
  4. Log/Audit : 회사 내 직원의 인터넷 사용을 레포팅할 수 있다. 반대로 인트라넷의 사용을 레포팅할 수도 있다.
  5. 지역 네트워크의 제한 우회 : 보안 상의 이유로 80 포트 외에 포트를 막아 놓는 경우가 있는데 이러한 제한을 우회해서 원하는 다른 서비스를 이용할 수 있다.

[vue access-control-allow-origin]

CORS 도메인 문제 해결
https://velog.io/@gomdori5505/CORS-%EB%8F%84%EB%A9%94%EC%9D%B8-%EB%AC%B8%EC%A0%9C-%ED%95%B4%EA%B2%B0

나를 너무나 힘들게 했던 CORS 에러 해결하기
https://xiubindev.tistory.com/115

크롬 CORS 에러 발견하고 해결했던 일요일 아침
https://brunch.co.kr/@markism/16

Vuejs 타 도메인주소로 api 호출시 CORS 에러나는 거 해결방법
https://jasunhee.tistory.com/312

Vue Axios CORS policy: No 'Access-Control-Allow-Origin'
https://stackoverflow.com/questions/55883984/vue-axios-cors-policy-no-access-control-allow-origin?rq=1

profile
UI/UX & Front-end

0개의 댓글