Я работаю с OpenWeatherAPI, и второй раз получаю эту ошибку, когда использую fetch: TypeError: "NetworkError при попытке извлечь ресурс." Я уже использовал этот API раньше, и он работал, поэтому я запутался, что вызывает ошибку на этот раз. Может быть, я использую тот же ключ API? Я вижу, что эта причина как-то связана с CORS или веб-безопасностью, и чтобы обойти эту ошибку, мне нужно либо снизить безопасность, либо использовать другой веб-браузер (я использую Firefox). Есть ли более простое решение для этого, чтобы код извлекался как обычно?
import React from "react";
class OpenWeather extends React.Component {
constructor(props) {
super(props);
this.state = {
city: "",
}
this.handleInputChange = this.handleInputChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleInputChange(e) {
this.setState({city: e.target.value})
}
async handleSubmit(e) {
const cityName = this.state.city;
const apiKey = "95f164c76ff59c438ecaa15889931a52";
const url = `api.openweathermap.org/data/2.5/weather?q=${cityName}&appid=${apiKey}`;
await fetch(url)
.then(response => {
return response.json();
})
.then(data => {
console.log(data);
})
.catch(err => {
console.log(err);
});
}
render() {
return (
<div>
<form onSubmit={this.handleSubmit}>
<input id="city" type="text" name="name" placeholder="Enter city:" value={this.state.city} onChange={this.handleInputChange} />
<button type="submit" value="Submit">Enter</button>
</form>
</div>
)
}
}
export default OpenWeather;