Qiita API v2をAjaxで利用するためのwebpack設定(ローカル開発環境専用)

Qiita API v2では、Qiitaの記事一覧やユーザー詳細、記事を「いいね」した人の一覧やストックした人の一覧を取得したりできます。
Qiitaの画面上では記事をストックした人を見ることはできないので、API経由で記事をストックした人がどんな人なのか見ることができる個人的なWebアプリを作りたくなるかもしれません。

しかし、ブラウザでは https://qiita.com/ と異なるドメインのページ上からAjaxで直接 https://qiita.com/ のAPIへはアクセスできなかったりします。
これはセキュリティ的な観点で正しい挙動で、CORSという仕組みによるものです。

この記事ではwebpackのローカル開発環境にProxyを設定し、Proxy経由でQiita API v2にアクセスする方法を紹介します。

webpackの設定

webpack-dev-server の proxyを設定します。

設定例

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で個人サービスを作るまで」という題目で本記事に関連した登壇をする予定です。