JavaScript

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

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

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サーバに接続できるようになります!


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

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

ABOUT ME
どんぶラッコ
ECコンサルタント、システムエンジニアを経て、quintet株式会社CTOに就任。普段はNuxt.jsやLaravelを使用しています。

\面白いと思ったら/

記事のシェア & Twitter のフォロー をお願いします!

@proglearn
RELATED POST

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です