hi-jason-jung
commented
3 years ago 이 에러가 발생하는 근본적인 이유는 웹 어플리케이션의 보안 모델로 인한 것이다.
-
SOP (Same-Origin Policy) 이 정책에 의해 XMLHttpRequest (혹은 ajax, axios 등)로 다른 웹페이지에 접근할 떄는 같은 출처(Same Origin)의 페이지에만 접근이 가능. (Same Origin: protocol, host, port가 모두 같음). 현재는 Rest API 등을 통한 외부 도메인 호출이 많아지기 때문에 CORS라는 새로운 정책이 도입.
-
CORS (Cross-Origin-Resource-Sharing) 웹 브라우저에서 외부 도메인 서버와 통신하기 위한 방식을 표준화한 스펙. 서버와 클라이언트가 정해진 헤더를 통해 서로 요청이나 응답을 결정하는 방식.
이를 위해 서버 헤더 중 Access-Control-Allow-Origin 라는 헤더를 *와 같이 모든 서버에 대해 허용하거나, 특정 서버만 지정하여 허용할 수 있다. Node의 경우 위 헤더를 설정하는 cors라는 미들웨어가 존재한다. 사용법은 아래와 같다.
const express = require('express');
const cors = require('cors');
let corsOption = {
origin: 'http://localhost:8000' // 허락하는 요청 주소
credentials: true // true로 하면 설정한 내용을 response 헤더에 추가해줌.
}
app.use(cors(corsOption)); // CORS 미들웨어 추가위 내용을 추가하면 에러 없이 서로 다른 도메인(서버 헤더에 추가된 외부 도메인과)간 통신이 가능핟.
Frontend 서버와 Backend 서버가 서로 다른 도메인을 사용(host는 같지만 port가 다름) -> 참고로 도메인 일치 여부는 protocol, host, port가 모두 같아야 동일한 도메인이다.
현재 도메인이 다르기 때문에 아래와 같은 에러 발생.