跨域调用html页面 如何实现

要实现跨域调用HTML页面，可以使用以下方法：

1. JSONP（JSON with Padding）：这是一种通过动态插入<script>标签来实现跨域请求的方法。在需要调用的HTML页面中，通过创建一个动态生成的<script>标签，将请求的URL作为src属性的值，并定义一个回调函数来处理返回的数据。

function handleResponse(data) {
  // 处理返回的数据
}

var script = document.createElement('script');
script.src = 'http://example.com/api?callback=handleResponse';
document.body.appendChild(script);

在服务器端，需要将返回的数据包装为函数调用的形式，例如：

handleResponse({ "name": "John", "age": 30 });

2. CORS（Cross-Origin Resource Sharing）：这是一种通过在服务器端设置HTTP头部来允许跨域请求的方法。在需要调用的HTML页面中，可以直接使用XMLHttpRequest对象或fetch函数发送跨域请求。

var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://example.com/api', true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    var response = JSON.parse(xhr.responseText);
    // 处理返回的数据
  }
};
xhr.send();

在服务器端，需要设置Access-Control-Allow-Origin头部来允许指定域名的请求，例如：

Access-Control-Allow-Origin: http://example.com

3. 代理服务器：如果上述方法无法实现跨域调用，可以考虑使用代理服务器来转发请求。在代理服务器端，接收到跨域请求后，再向目标服务器发送请求，并将结果返回给调用方。

这些方法都有各自的优缺点，具体选择哪种方法取决于实际情况和需求