---
slug: "nuxt3-how-to-proxy-outside-api-server"
title: "Nuxt3 で他サービスへのAPIプロキシを設定する方法"
description: "Nuxt 3 (Nitro) で他サービスの API への HTTP プロキシ設定を書く方法。`routeRules` の `proxy` を使うシンプルな例。"
url: "https://www.ytyng.com/blog/nuxt3-how-to-proxy-outside-api-server"
publish_date: "2022-11-20T03:29:57Z"
created: "2022-11-20T03:29:57Z"
updated: "2026-05-11T13:13:15.858Z"
categories: ["nuxt"]
keywords: ""
featured_image_url: "https://media.ytyng.com/resize/20250605/7ab16accfa8e452fb620df8ba34c0dc5.png.webp?width=768"
has_video: true
has_music: true
video_urls: ["https://media.ytyng.net/ytyng-blog/263/featured-video-1.mp4", "https://media.ytyng.net/ytyng-blog/263/featured-video-2.mp4", "https://media.ytyng.net/ytyng-blog/263/featured-video-3.mp4"]
music_urls: ["https://media.ytyng.net/ytyng-blog/263/featured-music-263-1.mp3", "https://media.ytyng.net/ytyng-blog/263/featured-music-263-2.mp3"]
lang: "ja"
---

# Nuxt3 で他サービスへのAPIプロキシを設定する方法

nuxt3 は、 server/api/xxx.ts というファイルを作るとサーバサイド API が簡単につくれるが、
その機能は使わずに、サーバサイドAPIは他の Webフレームワークを使っている場合に、開発環境を簡単に構築するための文書です。

Nuxt3 3.0.0-rc.11 以前では、 nuxt.config.ts の vite.server.proxy を設定すれば良かったのですが、Nuxt3 3.0.0-rc.12 以降ではその 設定が使えなくなっています。

rc.12 以降や正式版では、 nitro.config.ts で devProxy を設定すると、同様に実現できます。


# 背景

私は、Nuxt のアプリを開発中、Dev サーバで /api/ 以下のパスのリクエストをすべて別サーバ ( Django ) にプロキシしていた。
本番環境は、Kubernetes Ingress で振り分けているため、開発環境のみこのプロキシを使っていた。

これは、 nuxt.config.ts で

```ts
export default defineNuxtConfig({
  vite: {
    server: {
      proxy: {
        '/api/': {
            target: 'https://example.com/',
            ....
        },
```

上記のような設定をすることで実現できる。

Nuxt3 rc.11 では問題無かったが、rc.12 や 3.0.0 正式版にアップデート後、これは動作しなくなっている。


# 経緯

Github の Discussion でも話題がある。

https://github.com/nuxt/framework/discussions/1223

https://github.com/nuxt/framework/discussions/1223#discussioncomment-2784724

このコメントでもアナウンスのある通り、開発環境を対象とした対応であれば、nitro のプロキシ設定を使えば良い。

設定ファイルが1つ増えるだけで、特に追加パッケージの導入は必要無い。


# 設定方法

プロジェクトルート ( nuxt.config.ts ) の並びに、 nitro.config.ts を作成する。

nitro.config.ts

```ts
import {defineNitroConfig} from 'nitropack'

// https://nitro.unjs.io/config#devproxy
// https://github.com/http-party/node-http-proxy#options
export default defineNitroConfig({
  devProxy: {
    '/api/': {
      target: 'https://api.example.com/api/',
      changeOrigin: true,
      hostRewrite: true,
      cookieDomainRewrite: true,
      headers: {
        'X-Forwarded-Host': 'localhost:3000',
        'X-Forwarded-Proto': 'http'
      },
    }
  }
})
```

その後、開発サーバを再起動する。
これで開発用のプロキシが動く。

# 検証方法

どのオプションがどのように動作するのか検証するには、手っ取り早いのは nc で開発マシンにサーバを起動してしまう。

```
nc -l 8000
```

そして、 nitro.config.ts で

```ts
export default defineNitroConfig({
  devProxy: {
    '/api/': {
      target: 'http://127.0.0.1:8000',
      ...
```

このような設定にして動作確認を行う。

リクエスト1つに対してしか応答できないので、使いづらい所はあるが検証としては十分


# 参考資料

Nitro のドキュメント

- https://nitro.unjs.io/config#devproxy
- https://github.com/http-party/node-http-proxy#options