在 react js 中使用新闻 api 时加载资源失败：net::ERR_SSL_PROTOCOL_ERROR答案

【问题标题】：Failed to load resource: net::ERR_SSL_PROTOCOL_ERROR while using news api in react js在 react js 中使用新闻 api 时加载资源失败：net::ERR_SSL_PROTOCOL_ERROR
【发布时间】：2022-07-09 03:01:15
【问题描述】：

我正在开发一个 reactjs 网站。该网站基本上是一个新闻网站，我在其中使用新闻 Api 来获取数据，但在新闻 api 数据中有一个图像 url “https://cdn.siasat.com/wp-content/uploads/2021/07/Antarctica. jpg” 不起作用。我想用我文件夹中的图像替换它。我为此编写了一个代码，成功地将其更改为我的文件夹的 img.jpg 图像，但它没有显示在我的本地主机站点中。

This is the logic i have written to change emptyimage url .
export class Newsitem extends Component {
  render() {
    //   this is called destructuring in js meas you can fetch description and title from single prop
      let {title,description,imageurl,newsurl}=this.props
    return (
      <div className='my-3'>
<div className="card" style={{width: "18rem"}}>
<img src={imageurl==="https://cdn.siasat.com/wp-content/uploads/2021/07/Antarctica.jpg"?"img.jpg":imageurl}className="card-img-top" alt="..."/>
<div className="card-body">
<h5 className="card-title">{title}...</h5>
<p className="card-text">{description}...</p>
<a href={newsurl} target="_blank" className="btn btn-sm btn-primary">Read more...</a>
</div>
</div>
        
      </div>
    )
  }
}

This is the code after running and inspecting it in console :
<img src="img.jpg" class="card-img-top" alt="...">

此代码已将 url 更改为 img.jpg，但我不明白为什么它没有显示在我的网站上。我的控制台显示“加载资源失败：net::ERR_SSL_PROTOCOL_ERROR cdn.siasat.com/wp-content/uploads/2021/07/Antarctica.jpg:1"。我已经把这个网址改成了img.jpg

【问题讨论】：

出于好奇，如果您将 URL 设为 http 而不是 https，会发生什么？

标签： javascript reactjs newsapi

【解决方案1】：

这可能无法回答您的具体问题，但可能会帮助遇到同样错误的其他人。我在 Azure 中开发的 Web 应用程序上收到 Failed to load resource:net::ERR_SSL_PROTOCOL_ERROR 错误消息。页面上有托管在具有虚拟目录的服务器上的图像。该 URL 使用 HTTP 协议，并且在 URL 中有一个端口号，如下所示：

http://remote1.nikecaps.com:12345/ipad_images/StyleItem/SPORT-CLIMB.jpg

当我们在新网络应用程序之外的本地导航到该链接时，该链接有效。但是，在 Azure Web 应用中，我们得到了错误。

最初，浏览器抱怨必须在使用 HTTP 的站点上提供带有使用 HTTP 的 URL 的图像。因此，我们将图像 URL 更改为使用 HTTPS，但随后我们收到了您现在收到的特定 SSL 协议错误。

我们的解决方法是删除端口号，因为 URL 是 HTTPs。

【讨论】：