没有'Access-Control-Allow-Origin - React + Axios

Question

在我开始之前，我需要声明我是一个自学的菜鸟（“你好”）。

我正在尝试从克罗地亚 API 银行网站 http://api.hnb.hr/tecajn 获取数据。调用如下所示：

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

我面临的问题是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.

我正在学习并将React 用于 UI，axios 用于获取请求。

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;

我们查看了几乎所有的文档，但我仍然不明白。

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

我尝试了很多组合，我需要帮助。 我需要使用 Express.js 我需要做些什么吗？我不知道。

如果你的好人有时间帮助我，我将不胜感激。
太棒了！

Answer 1

您需要使用 CORS 服务来设置正确的标头并解决此问题。我多次遇到这个问题。看看这个网站http://crossorigin.me/