React中点击数据库读取的网址跳转localhost而非https链接如何解决

问题根因 #

你遇到的跳转异常是因为数据库中存储的employer.webAddress没有带https:///http://协议头，浏览器会默认把无协议的网址识别为当前站点的相对路径，自动拼接在当前域名（localhost:3000）后面，才会出现跳转错误。

修复方案 #

只需要在渲染超链接时，给没有协议的网址补全前缀即可，修改对应a标签的代码如下：

<Card.Text>
  <a 
    href={employer.webAddress.startsWith('http') ? employer.webAddress : `https://${employer.webAddress}`} 
    target="_blank" 
    rel="noopener noreferrer"
  >
    {employer.webAddress}
  </a>
</Card.Text>

本次修改还附带优化了两处细节：

• 原代码target="blank"修正为标准的target="_blank"，避免部分浏览器识别异常
• 新增rel="noopener noreferrer"属性，规避新页面跳转的安全风险

如果可以调整数据入库逻辑，更推荐在提交企业网址时就校验并补全协议头，这样后续所有用到该字段的场景都不需要额外做兼容处理。

内容的提问来源于stack exchange，提问作者nnoise