React サーバサイドとの通信

前回書いたSPAを実際に動かしてみるための前段階として、
サーバサイドとの通信をしてみたいと思い試しに動かしてみたところ躓いたため備忘録で残そうと思います！！
elsammit-beginnerblg.hatenablog.com

まずReactでget、postリクエストを行うためにはaxiosを用いるためインストールを行います。
[フロントエンド] axiosライブラリを使って、柔軟にHTTP通信を行う - YoheiM .NET

yarn add axios

そして、実際にReactを用いてサーバサイドにgetを行うためにこちらを作成し実行！！

import React, { Component } from 'react';
import axios from 'axios' 

export default class Todo extends Component  {

    constructor (props) {
        super(props);
        this.state = {
            name: 'yahoo',
        };
    }

    Clcik = () => {
        const url = "http://192.168.56.101:8080";
        axios.get(url).then((res) => {

          this.setState({
            name: res.data
          });
        });
      }

    render() {
        const {name} = this.state;

        return(<div>
            <h1>&nbsp;
                <u>テスト</u>
                <h3>{name}</h3>

                <button onClick={this.Clcik}>Click!!</button>
            </h1>
            </div>
        );
    }    
}

こちらは実行すると{name}の部分がyahooからサーバサイドから取得したデータを表示する、
そんな簡単なものになります。

そして、、、こちらで動作させてみたところ、、、

axios as been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

といったエラーが発生し、サーバサイドへget requestが送れない。。。泣

なぜだろうと思い、調べてみたところ、
どうやら、Cross Origin Resource Sharing(cors)が必要になるとのこと！！
corsに悩まされるな。axios でcorsを攻略する - Qiita

そこで、記事に書かれている通り下記を追加。

axios.defaults.headers.get['Content-Type'] = 'application/json;charset=utf-8';
axios.defaults.headers.get['Access-Control-Allow-Origin'] = '*';
axios.defaults.withCredentials = true; 

合わせて、こちらをサーバサイド側に実装する必要があったためまずはパッケージをインストールして、

npm install cors

次に下記をサーバサイド側に実装。

var cors = require('cors')
app.use(cors({ origin: true, credentials: true }));

無事エラー解消させることができました！！

corsについて理解できていない点があるため、これから調べてまとめてみたいと思います！！

■参考
サーバサイド側の実装はこちらになります。

const express = require('express');
const app = express();
var cors = require('cors')
app.use(cors({ origin: true, credentials: true }));

app.get('/', (req, res) => {
  console.log("bbb");
  res.send("<h1>Welcome</h1>");
});

app.listen(8080, ()=> {
  console.log("Listening: 8080");
});