Question

我一直在尝试通过React fetch使用以下代码从OpenWeather API获得响应：

    fetch('api.openweathermap.org/data/2.5/weather?q=Milwaukee&APPID=1234567890')
    .then(response => response.text())
    .then(data => {
       console.log(data)

当我跳过反应并将URL（api.openweathermap.org/data/2.5/weather?q=Milwaukee&APPID=1234567890）复制到浏览器中时，我得到一个完全有效的响应。（对于example）但是，当我在React应用程序中使用提取代码时，出现以下错误：

Request URL: http://localhost:3000/api.openweathermap.org/data/2.5/weather?q=Milwaukee&APPID=1234567890
Request Method: GET
Status Code: 431 Request Header Fields Too Large
Remote Address: 127.0.0.1:3000
Referrer Policy: no-referrer-when-downgrade

我正在从create-react-app的本地主机上运行React应用程序。为什么我可以从浏览器正常访问该API，但在我的应用中出现错误？

其他信息

如果有用，here是注册免费的OpenWeather API的链接

以下是响应标头中的其余信息：

HTTP/1.1 431 Request Header Fields Too Large
x-powered-by: Express
connection: close
date: Wed, 18 Sep 2019 15:45:21 GMT
transfer-encoding: chunked

或者在请求标头中：

GET /api.openweathermap.org/data/2.5/weather?q=Milwaukee&APPID=1234567890 HTTP/1.1
Host: localhost:3000
Connection: keep-alive
Sec-Fetch-Mode: cors
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.132 Safari/537.36
Accept: */*
Sec-Fetch-Site: same-origin
Referer: http://localhost:3000/
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9,es-US;q=0.8,es;q=0.7,ar-JO;q=0.6,ar;q=0.5

（在所有这些示例中，我的APPID都是伪造的，因此仅复制并粘贴我所拥有的内容将无法满足该请求）

Answer 1

这是一个非常“吸引人”的错误-您在网址前面缺少http://，所以：

fetch('https://api.openweathermap.org/data/2.5/weather?q=Milwaukee&APPID=1234567890')

因为您已经错过了它，所以url被解析为这个（您可以在“网络”标签中看到它）：

http://localhost:3000/api.openweathermap.org/data/2.5/weather?q=Milwaukee&APPID=1234567890

OpenWeather API React请求标头字段太大431

1 个答案: