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

Posted 2023-03-04

【中文标题】没有\'Access-Control-Allow-Origin - React + Axios

【英文标题】：No 'Access-Control-Allow-Origin - React + Axios没有'Access-Control-Allow-Origin - React + Axios

【发布时间】：2018-02-02 21:08:02

【问题描述】：

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

我正在尝试从克罗地亚 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://***.com/questions/35588699/response-to-preflight-request-doesnt-pass-access-control-check

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

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

【问题讨论】：

了解同源策略。你不能那样做。

'Access-Control-Allow-Origin' issue when API call made from React (Isomorphic app)的可能重复

要解决 http://api.hnb.hr/tecajn 缺乏 CORS 支持的问题，您可以在代码中使用 const url = 'https://cors-anywhere.herokuapp.com/http://api.hnb.hr/tecajn'，有关说明，请参阅 ***.com/questions/20035101/…

【参考方案1】：

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