React+axiosでLaravel APIからJSON取得

やりたいこと

• axiosでAPI叩いてJSONを取得してみたい
  • 取得先は前回記事で作ったやつ
• Reactは必須じゃないけどcreate-react-app一発で環境が作れて楽なので併せて使います

環境

• node, yarn(npm)導入済
• サーバサイドはNginx+PHP-FPM+Laravel

手順

React+axios

Reactプロジェクト作成

npx create-react-app react-axios
cd react-axios
yarn start

• npxによってホスト環境を汚さずにcreate-react-appコマンドが使える

axios導入

yarn add axios

Reactコード

• App.jsを以下のように編集
• axios試すのが目的なのでコンポーネント化とかは全然意識できてない

src/App.js

import React, { Component, Fragment } from 'react';
import axios from 'axios';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      tasks: []
    };
    this.getData = this.getData.bind(this);
  }

  getData() {
    axios
      .get('http://localhost:8000/test')
      .then(results => {
        const data = results.data;
        console.log(data);
        this.setState({
          tasks: [...data]
        });
      });
  }

  render() {
    const tasks = this.state.tasks.map(task => {
      return <li key={task.id}>{task.title}</li>;
    });

    return (
      <Fragment>
        <div className="App">
          <header className="App-header">
            <img src={logo} className="App-logo" alt="logo" />
            <h1 className="App-title">Welcome to React</h1>
          </header>
          <p className="App-intro">
            To get started, edit <code>src/App.js</code> and save to reload.
          </p>
        </div>

        <div>
          <button onClick={this.getData}>getData</button>
          <ul>
            {tasks}
          </ul>
        </div>
      </Fragment>
    );
  }
}

export default App;

• getDataボタンをクリックするとAPIから取得した値をリスト表示する

CORS設定

Failed to load http://localhost:8000/test: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3001' is therefore not allowed access.
createError.js:16 Uncaught (in promise) Error: Network Error
    at createError (createError.js:16)
    at XMLHttpRequest.handleError (xhr.js:87)

• 何も考えずにAPIを叩きに行くとブラウザのコンソールにこんなエラーが出る
• クロスドメイン制約というらしい
• サーバー側で許可設定が必要

Nginxで設定する場合

• こちら参考に設定ファイルに以下追記

/etc/nginx/conf.d/default.conf

add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Methods "POST, GET, OPTIONS";
add_header Access-Control-Allow-Headers "Origin, Authorization, Accept";
add_header Access-Control-Allow-Credentials true;

• 接続元を絞ってないので公開APIとかじゃない限り本番環境では非推奨な設定と思う

Laravelで設定する場合

• php artisan serveで開発してる場合はLaravel側で設定するしかなさそう
• 僕はやってないですがこちら参照

動作確認

• 無事取得値を表示できた

参考

• 『React入門 React・Reduxの導入からサーバーサイドレンダリングによるUXの向上まで』(穴井宏幸他, 翔泳社, 2018)
• https://qiita.com/rysk92/items/e5cf2fab8531f8ea3683