Question

在我开始之前，我需要发表自己的声明，自学习菜鸟（'你好'）。

我正在尝试从克罗地亚 API 银行网站 http://api.hnb.hr/tecajn 获取数据。电话看起来像这样：

file_id

我面临的问题是[{ "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用于获取请求。

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;

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

如果你们有时间帮助我，我将不胜感激 TY！

Answer 1

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

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

1 个答案: