[에러] No 'Access-Control-Allow-Origin' header is present on the requested resource.

 

에러 문구

Access to XMLHttpRequest at 'http://localhost:8000/boards' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

 

CORS

CORS(Cross-Origin Resource Sharing)는 교차 출처 리소스 공유라는 기능으로 실행 중인 웹 어플리케이션이 다른 출처의 리소스에 접근할 수 있는 권한을 부여할 수 있도록 웹 브라우저에 알려주는 기능이다. 그래서 해당 기능 때문에 위의 에러를 접할 수 있다.

이 경우 해당 컨텐츠를 제공하는 서버쪽에서 CORS 설정을 헤더(header)에 실어서 보내주는 방법이 정석적인 방식이지만 제3자가 다른 웹 사이트의 데이터를 가져오는 경우에는 쉽지 않다.

Proxy 역할을 해주는 중간 서버를 만들어서 문제를 해결할 수도 있지만 여전히 번거롭다. 그런데 Webpack에서 간단한 방법으로 Proxy 기능을 지원해주기 때문에 package.json 파일에 다음 항목만 추가해주면 간단하게 CORS문제를 해결할 수 있다.

 

에러 해결 방법

나는 서버를 node로 구현했기 때문에 node 서버에 필요한 플러그인을 추가하고 사용처리 하면 된다.

 

터미널

> npm install --save cors

 

index.js

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

const app = express();

app.use(express.static('public'));
app.use(express.urlencoded({extended: true}));
app.use(express.json());
app.use(cors);

• cors를 설치한 후 app.use에 cors를 사용처리 하면 위의 에러 문구를 피할 수 있다.