title: No 'Access-Control-Allow-Origin - React + Axios
body: <p>before i begin i need to make the statement that I am, self-learning noob ('Hello'). </p>
  
  <p>I'm trying to get data from a Croatian <strong>API</strong> banking site  <em><a href="http://api.hnb.hr/tecajn" rel="nofollow noreferrer">http://api.hnb.hr/tecajn</a></em>. The call looks like this: </p>
  
  <pre><code>   [{
      "broj_tecajnice": "162",
      "datum": "2017-08-24",
      "drzava": "Australija",
      "sifra_valute": "036",
      "valuta": "AUD",
      "jedinica": 1,
      "kupovni_tecaj": "4,942956",
      "srednji_tecaj": "4,957829",
      "prodajni_tecaj": "4,972702" 
     },{
      "broj_tecajnice": "162",
      "datum": "2017-08-24",
      "drzava": "Kanada",
      "sifra_valute": "124",
      "valuta": "CAD",
      "jedinica": 1,
      "kupovni_tecaj": "4,979337",
      "srednji_tecaj": "4,994320",
      "prodajni_tecaj": "5,009303"   
     },  ]
  </code></pre>
  
  <p>The problem I'm facing is  <code>No 'Access-Control-Allow-Origin' header</code> </p>
  
  <pre><code>XMLHttpRequest cannot load http://api.hnb.hr/tecajn. Response to preflight request doesn't pass access control check: 
  No 'Access-Control-Allow-Origin' header is present on the requested resource. 
  Origin 'http://localhost:3000' is therefore not allowed access.
  </code></pre>
  
  <p>I'm learning and using <code>React</code> for the UI and <code>axios</code> for the get request. </p>
  
  <pre><code>import React, { Component } from 'react';
  import axios from 'axios';
  
  class App extends Component {
    constructor(props) {
      super(props);
      this.state = {      
        test: null
      }
    }
  
    componentDidMount(){
      const getData = () =&gt; {      
        const url = ' http://api.hnb.hr/tecajn';
  
      axios.get(url, {
        headers: { 'Access-Control-Allow-Origin': '*'}
      }).then( (response) =&gt; {
          console.log("response", response);
            this.setState({
            test: response.data
          });        
      })
      .catch( (error) =&gt; {
          if(error instanceof Error) {
              console.log(error.message);
          } else {
              console.log(error.data);
          }
      });    
      }
      getData();
    }
  
    render() {
      return (
        &lt;div&gt;
          &lt;div className='container'&gt;
            &lt;p&gt;test&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default App;
  </code></pre>
  
  <p>I'we looked at almost all the documentation and i still don't get it.    </p>
  
  <pre><code> https://www.html5rocks.com/en/tutorials/cors
   https://stackoverflow.com/questions/35588699/response-to-preflight-request-doesnt-pass-access-control-check
  </code></pre>
  
  <p>I'we tried a lot of combination and i need help. 
  Do i need to use Express.js do i need to do something els. I don't know. </p>
  
  <p>If u good ppl have time to help me i would be grateful.<br>
  TY!</p>