Nuxt.jsで@nuxtjs/proxyを利用する [CORS][Axios]

2019年8月17日

Nuxt.jsで@nuxtjs/proxyによるリバースプロキシ機能を利用し、CORS (Cross-Origin Resource Sharing) によるブロックを解決してみます。

 

例えば Nuxt.jsによるアプリを http://localhost:3000/ で起動し、同じローカル環境上で下記のようなエンドポイントによるAPIを作成したとします。

 

http://localhost:3030/api

 

このエンドポイントをAxiosで呼び出だそうとすると、

 

下記のようなエラーが表示される場合があります。

 

Access to XMLHttpRequest at ‘http://localhost:3030/api’ from origin ‘http://localhost:3000’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

 

 

これはエラー表示にあるように CORS policy にブロックが原因です。本記事では、@nuxtjs/proxyモジュールを利用して上記のエンドポイントによるAPIを利用できるようにします。

 

Nuxt.jsおよびAxios自体に関しては関連ページをご覧下さい。

 

関連ページ

Nuxt.js入門 [$route.params][layouts]

 

Nuxt.jsでAxios Moduleを利用する

 

 

@nuxtjs/proxyのインストールと設定


 

@nuxtjs/proxy をインストールします。

 

package.json を確認。

 

次に nuxt.config.js ファイルを下記のように設定していきます。

 

modules に @nuxtjs/proxy を追記します。

 

axios項目およびproxy項目を追記します。本記事では「http://localhost:3030/api/〜」を利用することを前提に記述しています。

 

次に Nuxt.jsプロジェクト内の pagesディレクトリに適当なページコンポーネントを作成します。ボタンをクリックするとAPIを叩いた結果がコンソールに表示されます。

 

sample.vue

11行目

エンドポイントを設定しています。

 

 

 

LINEで送る
Pocket

Copyright © 2019 思考の葉 All Rights Reserved.  プライバシーポリシー