All Articles

[20191005 TIL] window.location.href vs replace


2019-10-05 TIL


CORS - Cross Origin Resource Sharing

CORS란?

CORS란 Cross-Site Http Request를 가능하게 하는 표준 구약입니다.

다른 도메인으로부터 리소스가 필요할 경우 cross-site http request가 필요합니다. 기존에는 XMLHttpRequest는 보안상의 이유로 자신과 동일한 도메인으로만 HTTP 요청을 보내도록 제한하였습니다. 즉, cross-origin http 요청을 제한했습니다.

하지만 지속적으로 웹 애플리케이션을 개선하고 쉽게 개발하기 위해서는 이러한 request가 꼭 필요했습니다. 그래서 XMLHttpRequest가 cross-domain을 요청할 수 있도록 하는 방법이 필요하게 되었습니다. 이러한 요청을 바탕으로 CORS가 탄생한 것입니다.


CORS의 종류

크게 4종류로 나누어 볼 수 있습니다.

1.Simple Request

  • GET, HEAD, POST 중 한 가지 방식을 사용

  • POST일 경우 Content-type이 아래 셋 중 하나를 만족 (application/x-www-form-urlencoded, multipart/form-data, text/plain)

  • 커스텀 헤더를 전송하지 않아야함

    2.Preflight Request

    3.Credential Request

    4.Non-Credential Request


location.href vs location.replace

  • location.href

    • 새로운 페이지로 이동된다.
    • 속성
    • 주소 히스토리가 기록된다.

  • location.replace

    • 기존페이지를 새로운 페이지로 변경시킨다.
    • 메서드
    • 주소 히스토리가 기록되지 않는다.

Http vs Https

HTTML는 HyperText Transfer Protocol로 WWW상에서 정보를 주고 받는 포토콜이다.

클라이언트인 웹브라우저가 서버에 HTTP를 통해 웹페이지나 이미지 정보를 요청하면 서버는 이 요청에 응답하여 요구하는 정보를 제공하게 된다.

결국 HTTP는 웹브라우저(Client)와 서버(Server)간의 웹페이지같은 자원을 주고 받을 때 쓰는 통신 규약이다.

http는 텍스트 교환이다. html페이지도 텍스트이다. 바이너리 데이터로 되어있는 것도 아니고 단순 텍스트를 주고 받기 때문에 누군가 네트워크에서 신호를 가로채어 본다면 내용이 노출된다.

이런 보안상의 문제를 해결해주는 프로토콜이 HTTPS 이다.

HTTPS는 인터넷 상에서 정보를 암호화하는 SSL(Secure Sockey Layer)프로토콜을 이용하여 웹브라우저(클라이언트)와 서버가 데이터를 주고 받는 통신 규약이다.


HTTP 응답 헤더

Access-Control-Allow-Origin

요청을 보내는 프론트 주소와 받는 백엔드 주소가 다르면 CORS 에러가 발생합니다. 이 때 서버에서 응답 메시지 Access-Control-Allow-Origin 헤더에 프론트 주소를 적어주어야 에러가 나지 않습니다.