生成后不使用API的反应

Question

我创建了一个API，它使用来自OpenWeather的web服务。它在本地可以正常工作。但是，当构建它并使用维塞尔部署它时，它会呈现站点，但它不会加载天气。我认为这是因为它没有连接到OpenWeather API，因为它不在浏览器工具的网络选项卡中。

我正在使用CRA ()。

依赖关系

• 材料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,
          appid: process.env.REACT_APP_OPEN_WEATHER_KEY,
          cnt: 7,
          units: "metric",
          lang: "pt",
        },
      });
      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.“)意思是“装载天气.”

Answer 1

我已经找到了解决办法。

首先，我的const将我的ID分配给它没有分配的API，尽管我已经在Vercel中设置了它。因此，我已经从.env文件中移除，并将其作为字符串添加到参数中。

第二个问题是Chrome阻止了API调用，因为它认为它不安全。可能SSL证书会解决这个问题，但是这个页面只用于学习或投资组合，所以.因此，为了使其工作，它需要设置这个特定的网站，以允许不安全的内容。

通过解决上面的那些问题，我能够让它发挥作用。