需通过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文件的
底部添加<script>标签，确保DOM已加载完成。 <p>2、使用fetch()函数传入API的URL地址，例如"https://<a style="color:#f60; text-decoration:underline;" title= "js" href="https://www.php.cn/zt/15802.html" target="_blank">jsonplaceholder.typicode.com/posts/1"。<p><span>立即学习“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）”； <p>3、调用.then()方法处理响应，使用response.<a style="color:#f60; text-decoration:underline;" title= "json" href="https://www.php.cn/zt/15848.html" target="_blank">json()解析返回的JSON数据。 <p>4、在第二个.then()中将获取到的数据插入到指定HTML元素内，例如document.getElementById("result").innerHTML = data.title; <p>5、使用.catch()捕获网络错误或解析异常，并在控制台输出<strong><font color="green">Error: 请检查API地址是否可访问且跨域策略是否允许。 <h2>二、使用XMLHttpRequest手动发送请求 <p>XMLHttpRequest是较早的浏览器原生API，兼容性更广，适用于需支持旧版IE浏览器的场景，其执行过程为同步或异步回调模式。 <p>1、创建XMLHttpRequest实例：const xhr = new XMLHttpRequest(); <p>2、调用open()方法配置请求方式与URL，例如xhr.open("GET", "https://api.example.com/data", true); <p>3、设置onload事件监听器，在状态码为200时读取xhr.responseText并解析为JSON对象。 <p>4、调用send()方法发出请求。 <p>5、在onerror事件中打印错误信息，确保<strong><font color="green">请求头未被CORS策略拦截且服务器返回了有效响应体。 <h2>三、通过动态创建script标签实现JSONP跨域（仅限支持JSONP的API） <p>JSONP利用<script>标签不受同源策略限制的特性，通过回调函数接收服务端返回的可执行JS代码，适用于仅提供JSONP接口的老系统。 <p>1、定义全局回调函数，例如window.handleData = function(data) { document.getElementById("output").textContent = data.message; }; <p>2、创建script元素，设置src属性为API地址并附带callback参数，例如"https://legacy-api.com/data?callback=handleData"。 <p>3、将script元素append到document.head中触发加载。 <p>4、确保API响应格式为handleData({"message": "success"})，否则<strong><font color="green">浏览器将报错ReferenceError且无数据渲染。 <h2>四、使用第三方库Axios简化请求流程 <p>Axios是一个基于Promise的HTTP客户端，提供统一的请求/响应拦截、自动JSON转换等功能，需通过CDN引入后方可使用。 <p>1、在HTML的<head>中添加Axios CDN链接：<br><script src="https://cdn.jsdelivr.net/<a style="color:#f60; text-decoration:underline;" title= "npm" href="https://www.php.cn/zt/16096.html" target="_blank">npm/axios/dist/axios.min.js"></script>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校验失败。
