Блог

Я новичок в 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>
);
  

Проверьте этот документ: https://developer.mozilla.org/en-US/docs/Web/Security/Mixed_content/How_to_fix_website_with_mixed_content

Если вы хотите отправлять скрипт со страницы https, вы также должны отправлять его на странице https.