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

Question

I'm trying to make a fetch request in JavaScript.我正在尝试在 JavaScript 中发出提取请求。 The goal is to get all the JSON from here into my React app.目标是将所有 JSON 从这里获取到我的 React 应用程序中。 I think I'm using one of the simplest methods available, but I'm still managing to mess up..我想我正在使用可用的最简单的方法之一，但我仍然设法搞砸了..

My expected result is a console.log() output with the json data.我的预期结果是带有 json 数据的console.log()输出。 The result I'm getting instead is an error that says我得到的结果是一个错误，上面写着

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

In my exploration of the problem, I changed some of my code that says .then(results => results.json()) to .then(results => results.text()) .在我对问题的探索中，我将一些代码更改为.then(results => results.json())为.then(results => results.text()) 。 That shows me the text of whatever my fetch request is getting.这向我显示了我的获取请求所获得的任何文本。 I discovered it's not getting to the supplied URL at all, but instead is returning my app's homepage (index.html, located at "/", I think).我发现它根本没有到达提供的 URL，而是返回了我的应用程序的主页（index.html，我认为位于“/”）。 Weird.奇怪的。

Here is the abridged version of my code:这是我的代码的删节版：

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>
    )
}

What my console.log(data) prints out is literally the index.html of my React app:我的console.log(data)打印出来的实际上是我的 React 应用程序的index.html ：

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

I can even see the request go off in my Developer Tools network tab.我什至可以在我的开发人员工具网络选项卡中看到请求发出。 To me, it doesn't look right.对我来说，这看起来不对。 It registers as undefined and under Network -> Headers -> General :它注册为undefined并在Network -> Headers -> General下注册：

Request URL: http://localhost:3000/undefined请求地址： http://localhost:3000/undefined
Request Method: GET请求方式：GET
Status Code: 304 Not Modified状态码：304 未修改

I've tried Googling the error messages and javascript fetch url returns index.html .我试过谷歌搜索错误消息和javascript fetch url returns index.html 。 The latter lead me to this page which looked promising, but adding the "proxy" line to my package.json didn't help (Specifically, I added: "proxy": "http://localhost:3000" ).后者将我带到这个看起来很有希望的页面，但是将“代理”行添加到我的 package.json 中并没有帮助（具体来说，我添加了： "proxy": "http://localhost:3000" ）。 I also don't think it's a credentials problem because I can access the URL I'm after just from my browser.我也不认为这是凭据问题，因为我可以从浏览器访问我想要的 URL。

I don't understand why this isn't working out for me.我不明白为什么这对我不起作用。 I'm copying the form of code from somebody else's github project for my own little Reddit clone.我正在为我自己的 Reddit 小克隆复制其他人的 github 项目中的代码形式。 Theirs works...他们的作品...

Answer 1

hardcoded_url is a const and not the class variable. hardcoded_url是一个常量而不是类变量。 Accessing it by this.hardcoded_url is the issue.通过 this.hardcoded_url 访问它是问题所在。

fetch(hardcoded_url) is the correct way here. fetch(hardcoded_url)是这里的正确方法。

this.hardcoded_url is undefined and so fetch is having undefined as the url considered relative the localhost and so API is http://localhost:3000/undefined instead of the actual 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