Reactjs应用程序收到此页面试图从未经验证的来源加载脚本的错误

Question

我刚接触reactjs，我的问题是什么时候reactjs应用程序是活的。在我允许它加载脚本之前，它不会从wordpress加载图像。请向我展示一个好的做法或方法来处理这个问题，谢谢！

      componentDidMount() {
    Axios.get(wordpressUrl).then(results => {
      this.setState({
        posts: results.data
      });
      console.log(this.state.posts);
    }).catch(error => console.log(error));
  }

this.state.posts是包含axios响应结果的数组

https://starocean.whatstreetapp.com/wp/wp-json/wp/v2/posts?_embed

return (
  <div>
    <span className='header'>  Welcome to News Feed!<br /></span>
    <div className="news_container">
    {this.state.posts.map(post => {
      return (
        <div key={post.link} className="post-wrapper" onClick={() => this.newTab(post.link)}>
          <div className="post">

            <h2 className="post-title">
              <a href={post.link} target="_blank"
                dangerouslySetInnerHTML={{ __html: post.title.rendered }}
              />
            </h2>
            {post.featured_media ?
              <a href={post.link}><img src={post._embedded['wp:featuredmedia'][0].media_details.sizes['large'].source_url} /></a>
              : null}
            {post.excerpt.rendered ?
              <div className="excerpt" dangerouslySetInnerHTML={{ __html: post.excerpt.rendered }} />
              : null}
          </div>
        </div>
      );
    })}
    </div>
  </div>
);

Answer 1

检查此文档：https://developer.mozilla.org/en-US/docs/Web/Security/Mixed_content/How_to_fix_website_with_mixed_content

如果你想从https页面中提供脚本，你也应该在https页面中提供它。