javascript - 强制获取图像数据到 https

Question

我正在寻找一种解决方案，以强制来自 fetch API 的图像使用 https 而不是 http

API 从获取的 JSON 文件中以 http 的形式返回图像结果，但这会在控制台中向 Mixed Content 发出警告

我正在获取 componentDidMount 作为

componentDidMount() {
    var self = this;
    const proxyurl = 'https://cors-anywhere.herokuapp.com/';
    const url = `//api.tripadvisor.com/api/partner/2.0/location/${this.props
      .tripAdvisorId}?key=${AuthKey}`;
    fetch(proxyurl + url)
      .then(data => data.json())
      .then(data => {
        self.setState({
          reviewData: data,
          isLoading: false
        });
      });
  }

然后通过映射数据

{this.state.reviewData.reviews.map(i => {
  return (
    <div key={i.id}>
      <img src={i.rating_image_url} alt={i.title} />
    </div>
  );
})}

当返回时，如何强制 {i.rating_image_url} 中的 url 使用 https > 来自 fetch?

Answer 1

通过使用正则表达式，类似于:

{this.state.reviewData.reviews.map(i => {
      return (
        <div key={i.id}>
          <img src={i.rating_image_url.replace(/^http:\/\//i, 'https://')} alt={i.title} />
        </div>
      );
    })}