1
私は自分が自己学習noob（' Hello '）であるという発言をする必要があります。いいえ 'アクセス制御許可元 - 反応+ Axios
私はクロアチア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"
}, ]
私が直面してる問題は、私は学習とget要求のためのUIとaxiosためReactを使用してい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.
です。
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を使用する必要がありますか何かelsを行う必要がありますか？知りません。
私に助けになる時間があれば、私は感謝しています。
TY！
同じ原点のポリシーについて学んでください。あなたはそれをすることはできません。 – SLaks
React（Isomorphicアプリ）からのAPI呼び出し時に['Access-Control-Allow-Origin]の問題が発生する可能性があります（https://stackoverflow.com/questions/41497674/access-control-allow-origin-issue-when -api-call-made-from-react-isomorphic-ap） – azium
'http：// api.hnb.hr/tecajn'からのCORSサポートの欠如を回避するには、' const url = 'https： /cors-anywhere.herokuapp.com/http：// api.hnb.hr/tecajn''を参照してください。また、説明についてはhttps://stackoverflow.com/questions/20035101/no-access-control-要求元リソース上に存在する許可元のヘッダー/ 42744707＃42744707 – sideshowbarker