보통 프론트에서 서버에서 요청한 API를 요청할 때 발생되는 오류이다.
왜 발생되느냐?
CORS (Cross Origin Resource Sharing)
한 도메인 또는 Origin의 웹 페이지가 다른 도메인을 가진 리소스에 엑세스 할 수 있게 하는 보안 메커니즘이다.
교차 출처 리소스 공유
동일 출처 정책
동일한 출처의 리소스만 접근하도록 제한 하는것.
http://naver.com:80
여기서 말하는 출처는 프로토콜, 호스트, 포트 가 일치하는.
왜 그러느냐
다른 도메인 사이트/api에서 받아온 쿠키정보로
또 다른 도메인 사이트에 ajax 요청을 보낼때 유저가 획득한 인증 토큰이 자동으로 첨부되어 사용자인척 할 수 있기 떄문.
생기게 된 이유
예전에는 동일한 도메인에서만 리소스를 받아왔다.
하지만 현재에는 클라이언트에서 도메인이 다른 서버에서 제공하는 API를 사용하는 일이 많아졌기때문에 CORS가 생기게 되었다.
에러 해결법
이게 발생은 프론트에서 하지만 실질적인 해결은 백엔드쪽에서 해야하는 경우가 많다. 그렇기에 문제해결하는데 어려움이 발생할 수 있다.
1. 다른 사람이 많든 프록시 서버 이용하기
요청해야하는 URL앞에 프록시서버 URL을 붙여 요청.
Access-Control-Allow-Origin: *를 설정
2. 클라이언트 : http-proxy-middleware 사용
http-proxy-middleware를 설치 한 후 setupProxy.js라는 파일을 src 폴더에 만들고 코드작성
const { createProxyMiddleware } = require("http-proxy-middleware");
module.exports = function (app) {
app.use(
"./api",
createProxyMiddleware({
target: "http://localhost:3000",
changeOrigin:true,
})
)
}이 외에도 다양한 방식이 존재 할 것이다.
이 두 방법을 사용한 후에도 안되면 찾아보자
