CORS란?

CORS를 처음 봤을때가 혼자 API서버와 클라이언트를 처음 만들었을때 겪었던 문제였다.

API서버로 호출을 했는데 에러 메시지가 출력 되어 구글링 했던 기억이 있었다.

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가 뭘까?
CORS(Cross-Origin Resource Sharing)는 한국어로는 교차 출처 리소스 공유라고 해석 할 수 있다.

교차 출처는 다른 출처를 말한다.

여기서 출처는 출처는 프로토콜, 호스트, 포트까지 합친것을 말한다.

출처가 다른 두개의 어플리케이션이 마음대로 소통하는 것은 보안상 위험하다. 그렇기 때문에 CORS 정책을 통해 기본적으로 막고 있는것이다.

해결법

정석적으로 서버에서 Access-Control-Allow-Origin 헤더에 알맞은 값을 세팅해주는것이다.
webpack-dev-server를 사용하여 해당 라이브러리가 제공하는 프록시 기능을 사용하면 CORS정책을 우회할 수 있다.

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: '[타켓주소]',
        changeOrigin: true,
        pathRewrite: { '^/api': '' },
      },
    }
  }
}

node.js Express에서 CORS 허용 방법

const cors = require('cors');

app.use(cors()); //모두허용

// 옵션으로 해당 도메인만 CORS 허용
let corsOptions = {
    origin: 'https://www.domain.com',
    credentials: true
}

app.use(cors(corsOptions));

출처:https://evan-moon.github.io/2020/05/21/about-cors/#%EA%B0%99%EC%9D%80-%EC%B6%9C%EC%B2%98%EC%99%80-%EB%8B%A4%EB%A5%B8-%EC%B6%9C%EC%B2%98%EC%9D%98-%EA%B5%AC%EB%B6%84