No 'Access-Control-Allow-Origin - React + Axios

Question

before i begin i need to make the statement that I am, self-learning noob ('Hello').

I'm trying to get data from a Croatian API banking site http://api.hnb.hr/tecajn. The call looks like this:

   [{
    "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"   
   },  ]

The problem I'm facing is No 'Access-Control-Allow-Origin' header

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.

I'm learning and using React for the UI and axios for the get request.

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

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {      
      test: null
    }
  }

  componentDidMount(){
    const getData = () => {      
      const url = ' http://api.hnb.hr/tecajn';

    axios.get(url, {
      headers: { 'Access-Control-Allow-Origin': '*'}
    }).then( (response) => {
        console.log("response", response);
          this.setState({
          test: response.data
        });        
    })
    .catch( (error) => {
        if(error instanceof Error) {
            console.log(error.message);
        } else {
            console.log(error.data);
        }
    });    
    }
    getData();
  }

  render() {
    return (
      <div>
        <div className='container'>
          <p>test</p>
        </div>
      </div>
    );
  }
}

export default App;

I'we looked at almost all the documentation and i still don't get it.

 https://www.html5rocks.com/en/tutorials/cors
 https://stackoverflow.com/questions/35588699/response-to-preflight-request-doesnt-pass-access-control-check

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.

If u good ppl have time to help me i would be grateful.
TY!

Possible duplicate of ['Access-Control-Allow-Origin' issue when API call made from React (Isomorphic app)](https://stackoverflow.com/questions/41497674/access-control-allow-origin-issue-when-api-call-made-from-react-isomorphic-ap) — azium, Aug 24 '17 at 21:07
To get around the lack of CORS support from `http://api.hnb.hr/tecajn`, you can use `const url = 'https://cors-anywhere.herokuapp.com/http://api.hnb.hr/tecajn'` in your code, and for an explanation, see https://stackoverflow.com/questions/20035101/no-access-control-allow-origin-header-is-present-on-the-requested-resource/42744707#42744707 — sideshowbarker, Aug 24 '17 at 22:05

score -1 · Answer 1 · answered Aug 24 '17 at 22:08

-1

You'll need to use a CORS service to set the proper headers and get around this. I've run into this problem many times. Check out this site http://crossorigin.me/

answered Aug 24 '17 at 22:08

rimraf

3,925
3
25
55

No 'Access-Control-Allow-Origin - React + Axios

1 Answers1