CORS에러

 브라우저에서는 보안 상의 이유로, 교차 출처 HTTP요청만 할 수 있다. 따라서 브라우저는 동일한 출처의 리소스에만 접근할 수 있도록 HTTP요청을 제한하고 이를 cors에러라고 한다. 예를 들어 클라이언트에서 IP주소가 192.123.0.1이라면 서버 역시 동일한 IP주소인 192.123.0.1일 때 서버 리소스에 접근할 수 있다. 만일 서버 주소가 98.98.0.1이라면 브라우저에서는 서버 접근을 제한하며 cors policy를 위반했다고 알린다. 

 

Node js에서 해결방법

일반적인 해결 방법으로는 서버에서 header에 Access-Control-Allow-Origin를 표기해주면 된다.

 

* 예시코드

import express from 'express'

app.use((req, res, next) => {
	res.setHeader('Access-Control-Allow-Origin', 'http://127.0.0.1:5500');
	next();
})

이런 식으로 미들웨어 안에 'Access-Control-Allow-Origin'을 적어주면 cors에러를 해결할 수 있다.

 

But, 이 방식은 Access-Control-Allow-Origin을 일일이 작성해주어야 하며, 오타가 발생할 수 있다. 그래서 Node js에는 cors에러 처리를 위해서 유용한 미들웨어가 존재한다. 

 

* 예시코드

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

const app = express()

app.use(cors())
app.get('/', (req, res) =>{
	res.send('Hello')
})

app.listen(8080)

처음에 터미널에 npm i cors 명령문을 입력해서 cors미들웨어를 설치하고, app.use(cors())를 사용해주면 Access-Control-Allow-Origin을 헤더에 작성하지 않고도 cors에러를 처리할 수 있다.