Chrome无法运行React教程HTML文件：localhost连接失败求助

我在Chrome浏览器中无法运行任何文件，提示localhost未连接。这是一份React教程HTML文件，最初可通过VS Code正常运行，但现在无法运行且持续出现相同错误。已检查网络设置为‘No Throttling’，排除了网络限流问题。相关代码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

    <!-- Don't use this in production: -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">
    
      function MyApp() {
        return <h1>Hello, world!</h1>;
      }

      const container = document.getElementById('root');
      const root = ReactDOM.createRoot(container);
      root.render(<MyApp />);

    </script>
    <!--
      Note: this page is a great way to try React but it's not suitable for production.
      It slowly compiles JSX with Babel in the browser and uses a large development build of React.

      Read this page for starting a new React project with JSX:
      https://react.dev/learn/start-a-new-react-project

      Read this page for adding React with JSX to an existing project:
      https://react.dev/learn/add-react-to-an-existing-project
    -->
  </body>
</html>

• 确认本地服务器状态
  之前能正常运行是因为VS Code依赖Live Server这类插件启动了本地HTTP服务，直接双击打开HTML是file://协议，不会用到localhost。现在检查：

  • 打开VS Code，查看底部状态栏的「Go Live」按钮，点击启动服务；如果没找到该按钮，先安装Live Server插件。
  • 启动服务后，确保浏览器访问的是插件生成的http://127.0.0.1:端口号/你的文件名.html地址，而非本地文件路径。

• 检查端口占用情况
  如果Live Server启动失败，大概率是默认端口（比如5500）被其他程序占用：

  • 在VS Code设置中搜索「Live Server > Settings: Port」，修改为其他未被占用的端口（比如5501），重新启动服务。

• 清理浏览器干扰项

  • 清除Chrome缓存：按Ctrl+Shift+Del，勾选「缓存的图片和文件」，点击清除后刷新页面。
  • 暂时禁用所有Chrome扩展（尤其是广告拦截、代理类工具），避免它们阻断本地服务连接。

• 验证代码有效性
  你的代码本身没有逻辑问题，可以复制到本地服务器运行测试，或确认文件未损坏。

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