ReactJS API 从 componentDidMount 调用返回 index.html 作为响应

Question

I have a quite simple ReactJS application.我有一个非常简单的 ReactJS 应用程序。 I want to fetch some data from my API on page load.我想在页面加载时从我的 API 中获取一些数据。 In my componentDidMount() function I call my getData() method to initialize my state in my application.在我的componentDidMount() function 中，我调用我的getData()方法在我的应用程序中初始化我的 state。 When I do this the console tells me this:当我这样做时，控制台会告诉我：

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

When I check my network tab I find that the response from my call is the index.html page returned to me in plain text.当我检查我的网络选项卡时，我发现我的呼叫响应是以纯文本形式返回给我的index.html页面。 Which I find very strange.我觉得很奇怪。

import React, {Component} from 'react';
import {Router} from "@reach/router";
import Applications from "./Applications";
import Application from "./Application";
import LogIn from "./LogIn";

class App extends Component {
    constructor(props) {
        super(props);

        this.state = {
            applications: []
        }
    }

    componentDidMount() {
        this.getData();
    }

    //Fetch data from the API and putting it in the state
    async getData() {
        const url = "/api/applications";
        const response = await fetch(url);
        const data = await response.json();
        this.setState({
            applications: data
        })
    }

    // And so on....
}

I have no clue to why this happens - because when I call my API from PostMan everything is all good and dandy.我不知道为什么会发生这种情况 - 因为当我从 PostMan 调用我的 API 时，一切都很好。 Expected response from DB (worked with call from postman): DB的预期响应（与邮递员的电话一起使用）：

[
    {
        "_id": "5edfac8b75b2bd3fa477555f",
        "text": "Application for Fullstack Developer",
        "applications": [],
        "__v": 0
    }
]

The response I received:我收到的回复：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="/logo192.png" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="/manifest.json" />
    <!--
      Notice the use of  in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>Job Applications</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  <script src="/static/js/bundle.js"></script><script src="/static/js/0.chunk.js"></script><script src="/static/js/main.chunk.js"></script></body>
</html>

Answer 1

just do like this.就这样做。

const url = "/api/applications";
fetch(url)
    .then(response => response.json())
    .then(data => this.setState({ applications: data }));

hope this'll help.希望这会有所帮助。

Answer 2

Aaaaand MASSIVE BRAINFART...啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊！

Of course my application does not return anything.当然，我的应用程序不会返回任何内容。 I have my API running as a seperate instance on my machine on a totally different port.我的 API 在我的机器上作为一个单独的实例运行在一个完全不同的端口上。 So when I want to hit my API I have to specify the full URL not just the /api/whatever - In my case the full URL should have been http://localhost:8080/api/applications So when I want to hit my API I have to specify the full URL not just the /api/whatever - In my case the full URL should have been http://localhost:8080/api/applications

NOTE - The best practie would be to store the base part of the URL in an .env file and give it a name such as URL_BASE=http://localhost:8080 and prepend it to my variable.注意- 最好的做法是将 URL 的基本部分存储在.env文件中，并为其命名，例如URL_BASE=http://localhost:8080并将其添加到我的变量中。

let url = process.env.URL_BASE + '/api/applications';

That way if you don't set the URL_BASE you just get the emty string prepended to the URL.这样，如果您不设置URL_BASE ，您只需将 emty 字符串添加到 URL 之前。 This structure is used with hosting services like Heroku此结构用于托管服务，例如 Heroku

ReactJS API 从 componentDidMount 调用返回 index.html 作为响应

问题描述

2 个解决方案

解决方案1
2 2020-06-09 17:01:42

解决方案2
0 已采纳 2020-06-10 07:10:27

ReactJS API 从 componentDidMount 调用返回 index.html 作为响应

问题描述

2 个解决方案

解决方案1 2 2020-06-09 17:01:42

解决方案2 0 已采纳 2020-06-10 07:10:27

解决方案1
2 2020-06-09 17:01:42

解决方案2
0 已采纳 2020-06-10 07:10:27