【Vue】Vue.jsのお勉強メモ② (WebAPIへ接続-axios-)

はじめに

どうも、小トロです～

今回も技術的な話題で、Vueを使ったWebAPIへの接続方法についてのお勉強メモです

事前準備

axiosのインストール

• Vueではaxiosと呼ばれるモジュールを利用して、WebAPIに接続するのが定石らしいです

• なので、以下のコマンドをVueプロジェクトで実行してモジュールをインストールしましょう

# npm install --save axios

CORSを解決

• CORSと呼ばれるセキュリティ的な制限を解決しないと、外部のURLからの情報をやり取りすることができません

• なので、外部のURLからの情報をやり取りするWebAPIの接続は、しっかりVueの中で解決しましょう

• Vue側のProxy機能を利用して、あたかも同一オリジンからリクエストをしたようにすることで解決させることができるらしいので、接続先のURLに合わせて設定ファイルを作るとCORSの解決ができると思います

module.exports = {
    devServer: {
        proxy: {
            '/api/': {
                target: 'http://localhost:8081',
            }
        }
    }
};

http://localhost:8081/api/**に接続する場合の設定です
また、vue.config.jsはpackage.jsonがあるディレクトリに作ればVueが読み込んでくれます。

実装

• axiosを使った実装例になります

• http://localhost:8081/api/usersに接続するとユーザ情報が返ってくるWebAPIに接続する想定で書いてます

import axios from "axios"
export const getUsers = () => {
    return axios.get('/api/users');
}

あとは、このgetUsersメソッドをプログラム上で呼び出せば接続しにいってくれます

shotoro 2020-04-19 17:41

コメントを書く

• もっと読む