[WAS와 Web Server] 04. CORS

# 학습 목표

• nginx를 통해 정적 웹 사이트, 정적 콘텐츠를 이해합니다.
• HTTP 기반의 서버를 생성하는 소프트웨어인 nginx를 사용하여, 웹 서버(Web Server)를 생성하여 정적 웹페이지 호스팅을 따라 해보세요.
• 다음과 같은 구조 중에서, 정적 웹페이지 호스팅의 경우에는 HTML, CSS등의 정적 파일만 전달하면 되기 때문에, 보다 단순한 구조인 Client - Web Server의 구조를 가집니다.
• nginx 샘플 정적 파일을 호스팅 하는 과정을 따라해보며, 환경 설정 파일을 작성하는 방법과 지시어에 대해서 학습하세요.  

 

---

# 학습 내용

1.  CORS 개념

1) CORS

cross origin resource sharing

- 웹 어플리케이션에서 다른 도메인 간에 자원을 공유하기 위한 보안 메커니즘

- 기본적으로 브라우저는 보안상의 이유로 같은 도메인 간의 요청에 대해서만 자원을 공유할 수 있도록 제한

(ex) 다른 도메인 서버가 악의적인 의도를 가지고 있을 경우 보안상 문제 발생 가능

- single page application과 같은 현대적인 웹 어플리케이션에서는 여러 도메인 간에 자원을 공유해야 하는 경우가 많기 때문에 이러한 제한이 문제가 될 수 있음

- CORS는 브라우저의 보안 제한을 우회하여 다른 도메인 간에 자원을 공유할 수 있도록 허용

2) CORS 사용 방법

- 서버 : 응답 헤더에 CORS 관련 정보를 추가해야 함

- 클라이언트 : 브라우저가 자동으로 이 정보를 확인하고, 서버로부터 자원을 안전하게 받아올 수 있게 됨

 

2.  CORS 적용

node.js로 CORS 방식 허용하기

# cors 코드를 작성할 디렉토리 생성 후 이동
$ mkdir cors_dir
$ cd cors_dir

# package.json 생성
$ npm init

# entry point 항목에만 입력 (파일명은 자유롭게 입력 가능)
app.js

# Express를 설치한 후 종속 항목 목록에 저장
$ npm install express --save

# Express를 임시 설치
$ npm install express

# http, cors 모듈 설치
$ npm install http cors

// index.js

// 1. 모두에게 허용하는 법
const http = require('http');
const express = require('express');
const app = express();
const server = createServer(app);
const cors = require('cors');

const PORT = 8080;

app.use(cors());

app.get('/', (req, res) => {
	res.send('Hello, World!');
});

server.listen(PORT, () => {
	console.log(`Server running on ${PORT}`);
});

// 2. 특정 도메인에만 허용하는 법
// index.js

const http = require('http');
const express = require('express');
const app = express();
const server = createServer(app);
const cors = require('cors');

const PORT = 8080;

let corsOptions = {
    origin: 'https://www.domain.com',
    credentials: true
}

app.use(cors(corsOptions));

app.get('/', (req, res) => {
	res.send('Hello, World!');
});

server.listen(PORT, () => {
	console.log(`Server running on ${PORT}`);

 

---

# References

- https://surprisecomputer.tistory.com/32

[Node.js] express cors 사용하기

- https://webpack.kr/guides/getting-started/

Getting Started | 웹팩

- https://velog.io/@kwonh/React-react-router-dom-%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0

[React] react-router-dom 시작하기

- https://expressjs.com/ko/starter/hello-world.html

Express "Hello World" 예제

- https://expressjs.com/ko/starter/installing.html

Express 설치