CORS

- Cross Origin Resource Sharing의 약자

- 현재 도메인과 다른 도메인으로 리소스가 요청될 경우

ex) http://a.com에서 읽어온 html 페이지지에서 다른 도메인 http://b.com/image.png를 요청하는 경우

- 이런 경우 해당 리소스는 cross-origin HTTP 요청에 의해 요청, 보안 상의 이유로 브라우저는 CORS를 제한

 

- 하지만 SPA의 경우 RESTful API를 기반으로 비동기 네트워크 통신을 하기 때문에 API 서버와 웹 페이지 서버가 다를 수 있다. 이런 경우에 API 서버로 요청을 할 시에 CORS 제한이 걸린다.

 

Access-Control-Allow-Origin

 

- 이를 해결하기 위한 간단한 방법은 서버의 응답 헤더를 변경해주는 것

- 서버의 헤더 중 Access-Control-Allow-Origin라는 속성은 CORS를 허용해 줄 도메인을 입력하는 곳이다. 모든 곳에 CORS를 허용하기 위해 *를 입력하면 된다.

Access-Control-Allow-Origin: *

특정 도메인에만 허용하려면 * 부분에 특정 도메인들을 입력하면 된다.

 

Express에서 CORS 허용하기

 

1) 헤더를 직접 변경해주는 방법

app.use(function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*")
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept")
    next()
})

2) 미들웨어를 사용하는 방법(추천)

const express = require('express');
const cors = require('cors');
const app = express();

app.use(cors()); //CORS 설정

app.listen(3000, function(){
	console.log('hi');
}

이처럼 미들웨어 사용 시, 모든 CORS 요청을 허용할 시 한 줄로 간단하게 추가 가능하다!