我創建了一個小的 API 來抓取火車到達/離開的網頁。我將它托管在 Heroku 上，當我訪問該頁面時：
到目前為止一切都很好。現在我希望在我的 React 應用程式中獲取這些資料，以便以更好的方式顯示它。這是我遇到問題的地方。我嘗試通過兩種方式獲取資訊，兩種方式都會導致相同的問題。
這是第一次嘗試：
React.useEffect(function(){
axios.get("https://sl-scraper.herokuapp.com/fromstockholm")
.then(response =>{
console.log(response);
})
.catch(err => console.log(err));
},[]);
這是第二次嘗試：
React.useEffect(()=>{
fetch("https://sl-scraper.herokuapp.com/fromstockholm")
.then(response => {
return response.json();
})
.then(data => {
console.log(data);
})
.catch(error => console.log(error));
},[]);
當我檢查日志時，這兩種嘗試都會導致此問題：
CORS 策略阻止了從源“http://localhost:3000”訪問“https://sl-scraper.herokuapp.com/fromstockholm”的 XMLHttpRequest：不存在“Access-Control-Allow-Origin”標頭在請求的資源上。
有誰知道為什么我會收到這些錯誤？非常感謝你。
uj5u.com熱心網友回復：
將 CORS-Anywhere 存盤庫克隆到我們的 PC
我們已經設定了環境，我們可以繼續將
這是正在運行的應用程式：
import "./App.css";
import axios from "axios";
import React from "react";
import HuddingeArrivalInfo from "./HuddingeArrivalInfo";
import StockholmArrivalInfo from "./StockholmArrivalInfo";
function App() {
const [HuddingeTimes, setHuddingeTrainTimes] = React.useState([]);
const [StockholmTimes, setStockholmTrainTimes] = React.useState([]);
React.useEffect(function () {
axios
.get("https://sl-scraper.herokuapp.com/fromstockholm")
.then((stockholmResponse) => {
setStockholmTrainTimes(stockholmResponse);
})
.catch((err) => console.log(err));
axios
.get("https://sl-scraper.herokuapp.com/fromhuddinge")
.then((huddingeResponse) => {
setHuddingeTrainTimes(huddingeResponse);
})
.catch((err) => console.log(err));
}, []);
return (
<div className="App">
<div className="MainContent">
{HuddingeTimes.length > 0 ? (
HuddingeTimes.map((trainTime) => {
return (
<HuddingeArrivalInfo
Arrives={trainTime.Arrives}
Departs={trainTime.Departs}
></HuddingeArrivalInfo>
);
})
) : (
<h2>Fetching data from api...</h2>
)}
<div className="stockholmMain">
{StockholmTimes.length > 0 ? (
StockholmTimes.map((trainTime) => {
return (
<StockholmArrivalInfo
Arrives={trainTime.Arrives}
Departs={trainTime.Departs}
></StockholmArrivalInfo>
);
})
) : (
<h2>Fetching data from api...</h2>
)}
</div>
</div>
</div>
);
}
我真的很感激這里的任何幫助。非常感謝。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/337018.html