Qiita API v2에서는 Qiita의 기사 목록, 사용자 세부 정보, 기사를 '좋아요'한 사람 목록 및 재고가 있는 사람 목록을 검색할 수 있습니다.
Qiita 화면에서 기사를 재고한 사람을 볼 수 없기 때문에 API를 통해 기사를 스톡한 사람이 어떤 사람인지 볼 수 있는 개인 웹 앱을 만들고 싶을 수도 있습니다.



그러나 브라우저는 https://qiita.com/와 다른 도메인 페이지에서 아약스 직접 https://qiita.com/ API에 액세스 할 수 없습니다.
이것은 보안 관점에서 올바른 거동으로 CORS 이라는 구조에 의한 것입니다.

이 기사에서는 webpack의 로컬 개발 환경에 Proxy를 설정하고 Proxy를 통해 Qiita API v2에 액세스하는 방법을 소개합니다.

webpack 설정

webpack-dev-server 프록시을 설정합니다.

설정 예

Vue CLI와 Nuxt.js에서의 구성 예는 아래에 나와 있습니다 (webpack.config.js 하지만 설정과 거의 같은가 생각합니다).

다음 예제에서는 /api 다음 요청을 https://qiita.com로 프록시(대체)합니다.

예 : 로컬 개발 환경이 http://localhost:3000에서 실행 중이면 http://localhost:3000/api/v2/users/:user_id/items에 요청하면 https://qiita.com/api/v2/users/:user_id/items로 Webpack이 대신 액세스하고 응답을 반환합니다.

Vue CLI의 구성 예

vue.config.js가 없으면 파일을 만듭니다.

vue.config.js

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'https://qiita.com'
      }
    }
  }
}

npm run serve에서 로컬 개발 환경이 시작되고 프록시도 활성화됩니다.

Nuxt.js의 설정 예

nuxt.config.js

module.exports = {
  mode: 'spa',  // or 'universal'

  // 省略

  proxy: {
    '/api': {
      target: 'https://qiita.com'
    }
  },

  // 省略
}

create-nuxt-app를 사용하면 npm run dev에서 로컬 개발 환경이 시작되고 프록시도 유효합니다.

LT 등단(예정)

Meguro.es #19 @oRo에서 "Nuxt.js+Firebase에서 개인 서비스를 만들 때까지"라는 제목으로 본 기사와 관련된 등단을 할 예정입니다.