为什么 fetch 返回我的 React 应用程序的 index.html 而不是我提供的 URL？

Question

我正在尝试在 JavaScript 中发出提取请求。 目标是将所有 JSON 从这里获取到我的 React 应用程序中。 我想我正在使用可用的最简单的方法之一，但我仍然设法搞砸了..

我的预期结果是带有 json 数据的console.log()输出。 我得到的结果是一个错误，上面写着

Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0

在我对问题的探索中，我将一些代码更改为.then(results => results.json())为.then(results => results.text()) 。 这向我显示了我的获取请求所获得的任何文本。 我发现它根本没有到达提供的 URL，而是返回了我的应用程序的主页（index.html，我认为位于“/”）。 奇怪的。

这是我的代码的删节版：

import React from "react";

const hardcoded_url =
    "https://www.reddit.com/r/learnprogramming/new/.json?count=25&after=";

getJSON = () => {
        fetch(this.hardcoded_url)
            .then(results => results.json())
            .then(data => console.log(data));
    };

render() {
    return (
        // <react stuff>
    )
}

我的console.log(data)打印出来的实际上是我的 React 应用程序的index.html ：

<!DOCTYPE html>
<html lang="en">
<!--- blah blah --->
</html>

我什至可以在我的开发人员工具网络选项卡中看到请求发出。 对我来说，这看起来不对。 它注册为undefined并在Network -> Headers -> General下注册：

请求地址： http://localhost:3000/undefined
请求方式：GET
状态码：304 未修改

我试过谷歌搜索错误消息和javascript fetch url returns index.html 。 后者将我带到这个看起来很有希望的页面，但是将“代理”行添加到我的 package.json 中并没有帮助（具体来说，我添加了： "proxy": "http://localhost:3000" ）。 我也不认为这是凭据问题，因为我可以从浏览器访问我想要的 URL。

我不明白为什么这对我不起作用。 我正在为我自己的 Reddit 小克隆复制其他人的 github 项目中的代码形式。 他们的作品...

Answer 1

hardcoded_url是一个常量而不是类变量。 通过 this.hardcoded_url 访问它是问题所在。

fetch(hardcoded_url)是这里的正确方法。

this.hardcoded_url is undefined ，因此 fetch undefined为相对于本地主机的 url，因此 API 为http://localhost:3000/undefined而不是实际的 url

为什么 fetch 返回我的 React 应用程序的 index.html 而不是我提供的 URL？

问题描述

1 个解决方案

解决方案1
1 已采纳 2019-12-28 05:19:53

为什么 fetch 返回我的 React 应用程序的 index.html 而不是我提供的 URL？

问题描述

1 个解决方案

解决方案1 1 已采纳 2019-12-28 05:19:53

解决方案1
1 已采纳 2019-12-28 05:19:53