CORS란?

💡

쉽게 말해 데이터 요청의 제한 이라고 보면 된다

CORS(Cross Origin Resource Sharing)의 기능은 브라우저가 서버에서 어떠한 요청자에 의해 허용하는지에 대한 기준에 의해 브라우저가 요청을 할지 요청을 하지 않을지에 대한 메커니즘

왜 굳이 불편하게 제약을 두는가?

브라우저에서는 개발자 도구라는것을 대부분 제공하고 있다

여기서 브라우저가 어떤 서버로 어떤 요청을 보냈는지에 대한 정보를 파악할 수 있다

가령 내 블로그를 기준으로 본다면

요청한 URL,Method,Payload 등의 모든 정보가 보인다

이걸 이용해서 똑같이 요청하면?

내 블로그의 똑같은 데이터들을 가져올수 있게 된거고 https://juny-biog.vercel.app와 같이 blog의 l 부분을 i로 바꾼 도메인을 만들고 내 사이트를 새롭게 만들수 있을것이다

즉! juny-blog가 요청을 했을때만 데이터를 주게끔 하는것이지 juny-biog가 요청을 하면 브라우저에서 거절하게끔 하는것이다

Cors 메커니즘이 생기기전에는 이와 같은 방법으로 은행등 금융사이트를 복제해서 이런 사기를 많이쳤던 사례들이 있었다

CORS의 제약

CORS의 제약은 도메인 외에도 존재한다

도메인이 다를경우

포트가 다를 경우 → 8080 , 9090

프로토콜이 다를경우 → http , https

즉 URL에서 3개의 요소이다 protocol, domain, port

아마 Origin 이라는 뜻은 저 3개를 합친말 인것 같다

mdn에 검색해보니까 origin 이라는 프로퍼티는 url일 경우 3개의 요소를 합친 문자열을 리턴하기도하고.. 그냥 내 생각

CORS를 설정하는 방법

서버에서 동의를 하냐 안하냐에 따라 브라우저가 요청을 거절할수도 있다고 했다

서버에서 cors를 어떻게 설정하냐 하면 그건 서버마다 설정이 다르기에 다 찾아봐야한다..

내가 쓸때마다 여기다가 적어놓으려고 한다

node.js & express

노드는 cors라이브러리를 따로 설치해야 한다


$ npm i cors


import * as cors from 'cors';
import * as app from 'express';

// 모든 요청을 허용할때
app.use(cors()) 
// juny-blog.vercel.app 만 허용할때
app.use(cors(
	'origin' : 'https://juny-blog.vercel.app',
	'credentials' : true
))

origin 키 값에다가 () => bool , new Error 로 복수개의 cors허용 또는 예외 문구도 할수 있으니 https://www.npmjs.com/package/cors 자세한건 위의 url 참조

이어서 보충할 내용…

요청과 응답 Headers에 허용관련 header가 많았는데 한번 다 살펴서 정리하기…