需通过JavaScript发起HTTP请求获取外部API数据，具体包括：一、用fetch API发GET请求；二、用XMLHttpRequest手动请求；三、用JSONP跨域；四、用Axios库简化流程；五、配本地代理解决CORS。

如果您希望在HTML页面中获取并展示来自外部API的数据，则需要通过JavaScript发起HTTP请求并与后端服务进行数据交互。以下是实现此功能的具体步骤：

一、使用fetch API发起GET请求

fetch是现代浏览器内置的轻量级网络请求接口，支持Promise语法，适合在HTML中直接调用外部RESTful API获取JSON数据。

1、在HTML文件的

1、定义全局回调函数，例如window.handleData = function(data) { document.getElementById("output").textContent = data.message; };

2、创建script元素，设置src属性为API地址并附带callback参数，例如"https://legacy-api.com/data?callback=handleData"。

3、将script元素append到document.head中触发加载。

4、确保API响应格式为handleData({"message": "success"})，否则浏览器将报错ReferenceError且无数据渲染。

四、使用第三方库Axios简化请求流程

Axios是一个基于Promise的HTTP客户端，提供统一的请求/响应拦截、自动JSON转换等功能，需通过CDN引入后方可使用。

1、在HTML的中添加Axios CDN链接：

2、调用axios.get()方法传入目标API URL。

3、在.then()中解构response.data获取实际数据内容。

4、使用.catch()捕获错误，并检查是否出现Network Error或404 Not Found，确认API服务处于运行状态。

五、配置本地开发代理规避CORS限制

当本地HTML文件通过file://协议直接打开时，浏览器会阻止所有跨域请求；此时可通过启动简易HTTP服务器并配置代理规则绕过限制。

1、使用Python启动本地服务器：python3 -m http.server 8000（Python3）或python -m SimpleHTTPServer 8000（Python2）。

2、将HTML文件放入该服务器根目录下，通过http://localhost:8000/your-page.html访问。

3、若仍遇CORS问题，可在服务器端响应头中添加Access-Control-Allow-Origin: *。

4、确保前端请求地址为相对路径或同域地址，避免触发浏览器的Origin mismatch校验失败。