"has been blocked by CORS policy" 에러 Cors는 무엇인가?

리액트와 노드를 병행해서 공부하던 중 노드로 api를 켜두고, 리액트로 요청을 보냈는데 cors 에러가 발생했다.

acess to fetch at 'http://localhost:3001/list' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

CORS POLICY는 뭔가?

CORS란 자신이 속하지 않은 다른 도메인, 다른 프로토콜, 혹은 다른 포트에 있는 리소스를 요청하는 cross-origin HTTP 요청 방식인데, 나의 경우 다른 포트에서 리소스를 요청했기 때문에 이런 오류가 난 것 같다. 

 

그럼 cors 방식을 node API에서 허용되게끔 해주면 되지! 

1. 모두에게 허용하는 방식 : 

일단 cors 모듈을 설치해준다.

npm install cors

아래와 같이 node api에 작성해주면, 모든 요청을 허용해준다. 

const cors = require('cors');
app.use(cors());

2. 걸러서 원하는 도메인만 허용하는 방식 :

일단 cors 모듈을 설치해준다.

npm install cors

아래와 같이 node api에 작성해주면, 허용할 주소에서 오는 요청은  허용해준다.

const cors = require('cors');
app.use(cors({origin : " 허용할 주소 "}));