이론

CORS (= 교차출처리소스 공유)

algml0703 2022. 4. 5. 23:07
반응형

Cross-Origin Resource Sharing


자신의 출처와 리소스가 다른 출처의 요청을 허용하는 것을 의미한다.
예를 들면 도메인A가 도메인B에 데이터를 요청하는 것을 허용해주는 것을 의미한다..

본래 브라우저는 보안상의 이유로 출처가 다른 리소스의 요청을 제한한다. 다른 출처에 요청하기 위해서는 해당 출처에서 올바른 CORS 헤더를 포함한 응답을 반환해야 한다.

// 아래는 https://bar.other/resources/public-data/ 출처에 대한 요청을 허용하는 코드예제이다.
const xhr = new XMLHttpRequest();
const url = 'https://bar.other/resources/public-data/';

xhr.open('GET', url);
xhr.onreadystatechange = someHandler;
xhr.send();

 

위의 경우 https://foo.example 브라우저에서 다른 출처에 요청을 보내고 있는 것으로, 출처가 다른 요청을 받은 서버는 Access-Control-Allow-Origin:을 통해 자신에 대해 요청하는 모든 도메인의 접근을 허용한다는 내용의 헤더를 응답에 함께 보내고 있다.
Access-Control-Allow-Origin은 가장 간단한 접근 제어 프로토콜이다. 

 

nodejs에서 cors 허용.   

import express from 'express';
import cors from 'cors';

const app = express();
// 특정 도메인에 대해서만 cors허용
// 모든 도메인에 대해 cors 허용하려는 경우에는 app.use(cors())
let allowlist = ['http://example-1.com','http://example-2.com'];
let corsOptionsDelegate = function (req:any, callback:Function) {
    let corsOptions
    if(allowlist.indexOf(req.header('Origin'))!== -1) {
        corsOptions = { origin:true }
    }else {
        corsOptions = { origin:false }
    }
    callback(null,corsOptions);
}

app.use(cors(corsOptionsDelegate))

 

 

출처

https://developer.mozilla.org/ko/docs/Web/HTTP/CORS

https://expressjs.com/en/resources/middleware/cors.html

반응형