react项目启动，页面加载提示链接不到unpkg.com

在react项目启动时，页面加载中过程中，提示正在等待unpkg.com的响应
同样的代码昨天还可以正常运行，今天就不可以了。好奇怪

img

1.导入的react的javascript文件，
写的是

<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js">script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js">script>

我可以fanQ,可以正常访问https://unpkg.com/react@18.2.0/umd/react.development.js

img

getbash截图：

img

2.用的是18版本的，
完整index.html代码：

html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
 
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
  
    <title>React Apptitle>
    
  head>
  <body>
    <div id="root">div>
    <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js">script>
    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js">script>

    <script src="../src/index.js" type="text/JSX">script>
    
  body>
html>

完整的index.js代码：

import React from 'react';
import ReactDOM from 'react-dom/client';
// 引入CSS
import './index.css';

//创建高阶组件

//1.创建一个函数以with开头
// 2. 指定函数参数以大写开头（作为要渲染的函数）
function withMouse(WrappedComponent){
  // 3. 在函数内部创建一个类组件，提供**复用的状态逻辑代码**（操作state的方法）
  class Mouse extends React.Component{
    //提供状态与操作状态的方法
    constructor(){
      super()
          //鼠标状态
      this.state={
        x:0,
        y:0
      }
    }
    handleMouseMove=e=>{
      this.setState({
        x:e.clientX,
        y:e.clientY
      })
    }

    // 控制鼠标状态的逻辑
    componentDidMount(){
      window.addEventListener('mousemove',this.handleMouseMove)
    }
    // 解绑事件
    componentWillUnmount(){
      window.removeEventListener('mousemove',this.handleMouseMove)
    }
    // 当前方法未渲染任何UI结构，withMouse渲染UI结构是捅错参数来决定的，拿到这个参数，在render方法中渲染一下
    // 4. 在该组件中渲染参数组件(WrappedComponent)，同时将状态通过props传递给参数组件({...this.state})
    render(){
      return <WrappedComponent {...this.state}>WrappedComponent>
    }
  } 
  return Mouse
}

// 用来测试高阶组件的一个组件
const Position =props=> (
  <p>
    鼠标当前位置：(x:{ props.x},y:{props.y})
  p>
)

// 5. 调用该高阶组件，传入要增强的组件，通过返回值拿到要增强后的组件，
// 获取增强后的组件
const MousePosition =withMouse(Position)

class App extends React.Component{
  render(){
    return(
      <div>
        <h1>高阶组件h1>
    {/* 6. 将高阶组件渲染到页面中 */}
        <MousePosition/>
      div>
    )
  }
}
/* 17版本写法 */
// ReactDOM.render(,document.getElementById('root'));

/* 18版本写法 */
ReactDOM.createRoot(document.getElementById('root')).render(<App/>);