我对 ReactJS 和 API 获取功能还很陌生，我在这个错误上卡了很长时间，所以我想知道是否有人知道问题出在哪里 :P

我正在尝试获取一个 json 文件，然后从中提取一些数据。 API 是 https://hytale.com/api/blog/post/published ，但他们没有启用 CORS，所以我尝试使用名为 allorigins 的 CORS 代理。谢谢！

代码：

import React from "react";
import BlogPost from "./BlogPost";

class BlogPosts extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      posts: [],
    };
  }

  componentDidMount() {
    fetch(
      `https://api.allorigins.win/raw?url=https://hytale.com/api/blog/post/published`
    )
      .then((response) => {
        if (response.ok) {
          console.log(response);
          response.json();
          console.log("Blogposts fetched PHASE 1!");
        }
      })
      .then((jsonData) => {
        this.setState({ posts: jsonData });
        console.log(this.state.posts);
        console.log(jsonData);
        console.log("Blogposts fetched PHASE 2!");
      });
  }

  render() {
      return (
        <div className="bg-gray-100 py-5 px-8 rounded-xl w-auto my-8 shadow-lg">
          <div className="text-3xl font-semibold">
            Latest BlogPosts or Announcements
          </div>
          <span className="inline-block my-3 mr-2 bg-green-100 px-3 py-1 rounded-2xl text-green-700">
            <b className="text-green-800">0</b> new blogposts in the last month.
          </span>
          <br />
          <p className="font-semibold text-xl mb-5 text-gray-700">
            Check out the latest 5 blogposts here:
          </p>

          {this.state.posts === null ? (
            <span className="text-gray-400 font-semibold text-lg">
              Loading BlogPosts...
            </span>
          ) : (
            this.state.posts.map((post) => {
              return <BlogPost
                name={post.title}
                date={post.publishedAt}
                author={post.author}
                type={post.coverImage.contentType}
                image={
                  "https://cdn.hytale.com/variants/blog_thumb_" + post.coverImage.s3Key
                }
                text={post.bodyExcerpt}
                link="https://hytale.com/news/2020/12/december-2020-development-update"
              />
              })
          )}
        </div>
      );
  }
}

export default BlogPosts;