title: Cannot get a data with Axios on ReactJS
body: <p>I am new developer <strong>ReactJS</strong>, I develop a table  with <strong>ReactJS</strong> on the FrontEnd, <strong>NodeJS</strong> on BackEnd and <strong>MySQL</strong> about the database.
  I want to get a data with Select request on the table,
  I test it on the backend with <em>Postaman</em>, it works well.</p>
  <p>My front End :</p>
  <pre><code>class ListeClients extends Component {
    constructor(props) {
      super(props);
      this.state = {
        clients: []
      };
    }
  
    componentDidMount() {
      console.log(&quot;inside componentWillMount&quot;);
      let self = this;
      axios({
        method: &quot;get&quot;,
        url: &quot;/app/listeclients/&quot;,
        withCredentials: true,
        headers: {
          &quot;Access-Control-Allow-Origin&quot;: &quot;*&quot;,
          &quot;Content-Type&quot;: &quot;application/json&quot;,
          Accept: &quot;application/json&quot;
        }
      })
        .then(response =&gt; {
          // const clients = response.data;
          console.log(JSON.stringify(response.data));
          self.clients = response.data;
          //    this.setState({clients});
        })
        .catch(error =&gt; {
          console.log(error);
        });
    }
  
    render() {
      console.log(this.state.clients);
      return (
        &lt;div className=&quot;animated fadeIn&quot;&gt;
          &lt;Row&gt;
            &lt;Col&gt;
              &lt;Card&gt;
                &lt;CardHeader&gt;
                  &lt;h4&gt;
                    &lt;strong&gt;
                      &lt;i className=&quot;fa fa-align-justify&quot; /&gt; Tous les clients
                    &lt;/strong&gt;
                  &lt;/h4&gt;
                &lt;/CardHeader&gt;
                &lt;CardBody&gt;
                  &lt;div className=&quot;container&quot;&gt;
                    &lt;div className=&quot;panel panel-default p50 uth-panel&quot;&gt;
                      &lt;table className=&quot;table table-hover&quot;&gt;
                        &lt;thead&gt;
                          &lt;tr&gt;
                            &lt;th&gt;Code&lt;/th&gt;
                            &lt;th&gt;Prenom&lt;/th&gt;
                            &lt;th&gt;Nom&lt;/th&gt;
                            &lt;th&gt;Email&lt;/th&gt;
                            &lt;th&gt;Telephone&lt;/th&gt;
                            &lt;th&gt;Action&lt;/th&gt;
                          &lt;/tr&gt;
                        &lt;/thead&gt;
                        &lt;tbody&gt;
                          {this.state.clients.map(client =&gt; (
                            &lt;tr key={client.id}&gt;
                              &lt;td&gt;{client.Code} &lt;/td&gt;
                              &lt;td&gt;{client.Prenom}&lt;/td&gt;
                              &lt;td&gt;{client.Nom}&lt;/td&gt;
                              &lt;td&gt;{client.Email}&lt;/td&gt;
                              &lt;td&gt;{client.Telephone}&lt;/td&gt;
                              &lt;td&gt;
                                &lt;a&gt;Edit&lt;/a&gt;|&lt;a&gt;Delete&lt;/a&gt;
                              &lt;/td&gt;
                            &lt;/tr&gt;
                          ))}
                        &lt;/tbody&gt;
                      &lt;/table&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/CardBody&gt;
              &lt;/Card&gt;
            &lt;/Col&gt;
          &lt;/Row&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default ListeClients;
  </code></pre>
  <p>but when I run it on ReactJS, I get :</p>
  <pre><code>[]
  length: 0__proto__: Array(0)concat: ƒ concat()constructor: ƒ Array()copyWithin: ƒ copyWithin()entries: ƒ entries()every: ƒ every()fill: ƒ fill()filter: ƒ filter()find: ƒ find()findIndex: ƒ findIndex()forEach: ƒ forEach()includes: ƒ includes()indexOf: ƒ indexOf()join: ƒ join()keys: ƒ keys()lastIndexOf: ƒ lastIndexOf()length: 0map: ƒ map()pop: ƒ pop()push: ƒ push()reduce: ƒ reduce()reduceRight: ƒ reduceRight()reverse: ƒ reverse()shift: ƒ shift()slice: ƒ slice()some: ƒ some()sort: ƒ sort()splice: ƒ splice()toLocaleString: ƒ toLocaleString()toString: ƒ toString()unshift: ƒ unshift()values: ƒ values()Symbol(Symbol.iterator): ƒ values()Symbol(Symbol.unscopables): {copyWithin: true, entries: true, fill: true, find: true, findIndex: true, …}__proto__: Object
  ListeClients.js:15 inside componentWillMount
  </code></pre>
  <p>I want to get data on this table :</p>
  <p><a href="https://i.stack.imgur.com/DfsuF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DfsuF.png" alt="enter image description here" /></a></p>
  <p>How to fix that please ?</p>