构建后，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证书可以解决该问题，但是该页面仅用于学习或投资组合，因此...因此，要使其正常运行，需要将该特定网站设置为允许不安全的内容。

通过解决上述问题，我得以使其正常工作。