Nuxt 에서 서버 미들웨어를 사용하여 CORS 허용방법

Nuxt.js에서 서버 미들웨어를 사용하여 CORS(Cross-Origin Resource Sharing)를 허용하는 방법은 아래와 같습니다.

CORS를 허용하려면 서버 미들웨어를 만들어야 합니다.

 

1. Nuxt.js 프로젝트의 루트 디렉토리에 middleware 디렉토리를 만듭니다 (만약 없다면).
2. middleware 디렉토리 안에 새로운 파일을 생성하고 원하는 이름을 부여합니다. 예를 들어, cors.js로 파일을 저장합니다.
3. cors.js 파일에 다음과 같이 서버 미들웨어 코드를 작성합니다.

// middleware/cors.js
export default function (req, res, next) {
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, DELETE');
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');

  return next();
}

4. nuxt.config.js 에 미들웨어를 등록해줍시다.

// nuxt.config.js
export default {
  // ...

  serverMiddleware: [
    '~/middleware/cors.js',
  ],

  // ...
}

 

만약 특정 도메인의 추가를 원하면 * 대신 특정 도메인을 추가하면 됩니다.