如何解决构建后,React不使用API 依赖项目录结构 api.js Forecast.jsx
我创建了一个使用OpenWeather中的Web服务的API。在localhost中一切正常。但是,在构建并使用Vercel进行部署时,它会呈现站点,但不会加载天气。我相信这是因为URL不在浏览器工具的“网络”标签中,因此未连接到OpenWeather API。
我正在使用CRA(创建React应用)。
依赖项
- 材料Ui /核心:4.11.0
- 材料Ui /图标:4.9.1
- Axio:0.20.0
- 区域设置:0.1.0
- 时刻:2.29.1
- 样式化的组件:5.2.1
目录结构
weather-api
|-- public
|-- src
| |-- Assets (Images & Icons)
| |-- Components
| |-- Content
| | |-- Forecast
| | |-- Forecast.jsx
| | |-- Weather
| | |-- styles.js
| | |-- Weather.jsx
| |-- Controller
| |-- fonts
| |-- Service
| | |-- api.js
| |-- Styles
| |-- App.jsx
| |-- index.js
| |-- theme.js
|-- .env
|-- .gitignore
|-- package.json
|-- README.md
|-- yarn.lock
api.js
import axios from 'axios';
const api = axios.create({
baseURL: 'http://api.openweathermap.org/data/2.5/'
});
export default api;
Forecast.jsx
***
import api from "../../Service/api";
***
const Forecast = (props) => {
const { city } = props;
const [location,setLocation] = useState(false);
const [forecast,setForecast] = useState(false);
***
let getForecast = async (city,lat,long) => {
if (city) {
let res = await api.get("forecast",{
params: {
q: city,appid: process.env.REACT_APP_OPEN_WEATHER_KEY,cnt: 7,units: "metric",lang: "pt",},});
setForecast(res.data);
} else {
let res = await api.get("forecast",{
params: {
lat: lat,lon: long,});
setForecast(res.data);
}
};
useEffect(() => {
navigator.geolocation.getCurrentPosition((position) => {
getForecast(city,position.coords.latitude,position.coords.longitude);
setLocation(true);
});
},[city]);
if (!location) {
return (
<Fragment></Fragment>
);
} else if (!forecast) {
return <Fragment></Fragment>;
} else {
return (
<Fragment>
<Grid container justify="center" spacing={1}>
<Grid item>
<WeatherCard
dayWeek={weekDayCap[0]}
maxTemp={forecast.list[0].main.temp_max}
minTemp={forecast.list[0].main.temp_min}
desc={capitalize(forecast.list[0].weather[0].description)}
imgurl={forecast.list[0].weather[0].icon}
/>
***
</Grid>
</Grid>
</Fragment>
);
}
};
export default Forecast;
Weather.jsx基本上与Forecast.jsx相同。
这是我的本地主机上的结果
这就是我在主机站点上看到的
(“ Carregando o clima ...”的意思是“正在加载天气...”)
解决方法
我设法找到了解决方法。
首先,我的const appid将ID分配给未分配的API,即使我在Vercel中进行了设置。因此,我已从.env文件中删除,只是将其作为字符串添加到参数中。
第二个问题是Chrome认为它不安全,因此阻止了API调用。可能是SSL证书可以解决该问题,但是该页面仅用于学习或投资组合,因此...因此,要使其正常运行,需要将该特定网站设置为允许不安全的内容。
通过解决上述问题,我得以使其正常工作。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。