【Nuxt.js】データベースにCORSで接続できない？ならば @nuxtjs/proxy を使いなさい【手順】

honda 2024年10月4日

みなさん、こんにちは。どんぶラッコです。

Nuxt.jsを使って開発する際、 axiosモジュールを使ってAPIと通信したりすると思います。

その時、こんな悩みはありませんか？

名無しさん

yarn dev で http://localhost:3000 でNuxt.jsサーバを起動して、http://localhost:8000 で APIサーバを起動してテストしているのに、連携されない…

その原因は、CORS規約に引っかかっているからです。

CORSとは Cross-Orogon Resource Sharing の略です。

基本的に、Webページはページの情報を同じ場所(リソース)からしか取得できないようになっています。

そんな時は、 @nuxtjs/proxy モジュールを使ってあげると解決します！

ということで、早速設定してみましょう

`@nuxtjs/proxy`をインストール

まずはお決まりの yarn add します

yarn add @nuxtjs/proxy # or npm install @nuxtjs/proxy

※ 追記: Axios Module を既にインストールしている場合、既にビルドインされているので追加のインストールは不要になったようです

✨ Do you know that Axios Module has built in support for Proxy Module?
https://github.com/nuxt-community/proxy-module より

nuxt.config.jsの設定

あとは nuxt.config.js に設定を追加するだけ！簡単ですね

expoprt default {
	modules: [
    // モジュールに読み込み設定追加
    '@nuxtjs/proxy'
  ],
  // ...中略....
  axios: {
    // axios でproxy が使えるようにする
    proxy: true
  },
  proxy: {
    '/api/': {
      // ターゲット先のURLを指定
      target: 'http://127.0.0.1:8000'
    }
  },
}

このように設定すると、 localhost:3000/apiにアクセスすると、APIサーバに接続できるようになります！

いかがだったでしょうか？

みなさんもぜひ活用してみてください！