Navigation

📁 vue

Nuxt.jsのServer Middlewareを使ったAPIリクエストのプロキシ設定

📅 7月 9, 2025
👤
⏱ 2 min read

Nuxt.jsのServer Middlewareを使ったAPIリクエストのプロキシ設定

概要

Nuxt.jsのServer Middlewareを使用することで、APIリクエストをプロキシ設定することが可能です。この機能を活用することで、フロントエンドからバックエンドのAPIにリクエストを送る際に、リクエストを中継するサーバーを簡単に設定することができます。この記事では、Nuxt.jsのServer Middlewareを使用したAPIリクエストのプロキシ設定について解説します。

なぜこの技術/機能が必要なのか

フロントエンド開発において、APIを利用する際にはクロスオリジンリクエスト（CORS）の制約があります。この制約を回避するために、独自のサーバーを介してAPIリクエストを中継する必要があります。Nuxt.jsのServer Middlewareを使用することで、簡単にAPIリクエストのプロキシ設定を行うことができます。

解決する問題やユースケース

  • クロスオリジンリクエスト（CORS）の制約を回避する
  • バックエンドAPIへのリクエストを中継するサーバーを設定する

前提知識と環境要件

  • Vue.jsおよびNuxt.jsの基本知識
  • Node.jsおよびnpmのインストール済み環境

基本実装


<template>
  <div>
    <!-- 実践的なVueテンプレート -->
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'

const data = ref()

onMounted(() => {
  /* ライフサイクルフック */
})
</script>

<style scoped>
/* コンポーネント固有のスタイル */
</style>

Composition API活用


import { ref, computed } from 'vue'

export function useExample() {
  const state = ref()
  
  const computedValue = computed(() => {
    /* 算出プロパティ */
  })
  
  return {
    state,
    computedValue
  }
}

テンプレート構文


<template>
  <div v-if="condition">
    <component :is="dynamicComponent" />
  </div>
</template>

状態管理


import { defineStore } from 'pinia'

export const useExampleStore = defineStore('example', () => {
  // ストアの実装
})

実践例

Nuxt.jsの`nuxt.config.js`ファイル内でServer Middlewareを使用してAPIリクエストのプロキシ設定を行う方法を示します。 


export default {
  serverMiddleware: [
    { path: '/api', handler: '~/server-middleware/api-proxy.js' }
  ]
}

そして、`server-middleware/api-proxy.js`ファイル内で以下のようにプロキシ設定を行います。


const { createProxyMiddleware } = require('http-proxy-middleware')

module.exports = function (req, res, next) {
  createProxyMiddleware({
    target: 'http://localhost:3000', // バックエンドAPIのベースURL
    changeOrigin: true,
    pathRewrite: {
      '^/api': '/' // プロキシパスの設定
    }
  })(req, res, next)
}

これにより、`/api`以下へのリクエストが`http://localhost:3000`へ中継されるようになります。

関連技術・参考情報

  • [Nuxt.js Server Middleware 公式ドキュメント](https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-servermiddleware)
  • [http-proxy-middleware パッケージ](https://www.npmjs.com/package/http-proxy-middleware)

以上が、Nuxt.jsのServer Middlewareを使ったAPIリクエストのプロキシ設定についての解説です。この機能を活用することで、フロントエンドからバックエンドのAPIへのリクエストをスムーズに中継することができます。

← Back to vue