无法使用React中的axios从OpenWeather网站的5天天气预报API获取get请求

Question

嗨，我是一个反应和开发一个非常简单的天气网站，显示一个特定城市的5天预报的初学者。最初，我已经建立了一个没有数据的简单的外观前端。现在我打算使用OpenWeather网站Here is the link提供的API来填写数据。

我使用axios在react中获取get请求，但是当控制台记录响应时，我的代码无法获取响应，它显示错误404，它显示以下错误

xhr.js:177 GET http://localhost:3000/api.openweathermap.org/data/2.5/forecast?q=M%C3%BCnchen,DE&appid=b606f9db39d148829c9500a2651c63dd 404 (Not Found)

createError.js:16 Uncaught (in promise) Error: Request failed with status code 404

    at createError (createError.js:16)
    at settle (settle.js:17)
    at XMLHttpRequest.handleLoad (xhr.js:62)

下面是我的代码

App.js

import React from 'react'

import Navbar from './Components/Navbar/Navbar'
import Cities from './Components/Cities/Cities'

const App = () => {
  return (
    <div>
     
      <Navbar/>
      <h1>City Name</h1>
      <Cities/>
    </div>
  )
}

export default App

Cities.js

import React from 'react'

import Day3 from './City/Day3'
import Day1 from './City/Day1'
import Day2 from './City/Day2'
import Day4 from './City/Day4'
import classes from './Cities.module.css'


const Cities = () => {

    return (
        <div className={classes.Cities}>
           
            <Day1/>
            <Day2/>
            <Day3/>
            <Day4/>
        </div>
    )
}

export default Cities

Day1.js

import React, { Component } from 'react'
import { WiDayCloudy } from "weather-icons-react"
import classes from './City.module.css'
import axios from 'axios'
class Day1 extends Component  {

    componentDidMount(){
        axios.get('api.openweathermap.org/data/2.5/forecast?q=München,DE&appid=b606f9db39d148829c9500a2651c63dd').then(
            response=>{
                console.log(response)
            }
        )
    }

    render(){
        return (
        <div className={classes.City}>
         <WiDayCloudy size={100} color='rgb(156, 231, 231)' />
           <h1>Day 1</h1>
           <h4>Maximum temperature</h4>
           <h4>Minimum Temperature</h4>
           <h4>Humidity</h4>
           <h4>Precipitation</h4>
        </div>
    )

    }
    
}

export default Day1

第2天第3天第4天与Day1相同

请帮帮忙

Answer 1

你的问题在这里

"http://localhost:3000/api.openweathermap.org/data/2.5/forecast?q=M%C3%BCnchen,DE&appid=b606f9db39d148829c9500a2651c63dd"

它应该是这样的：

"https://api.openweathermap.org/data/2.5/forecast?q=M%C3%BCnchen,DE&appid=b606f9db39d148829c9500a2651c63dd"

为此get请求配置axios