代理 API JavaScript 获取

在 Web 开发中，涉及到网络请求时常常需要使用接口 API 来获取数据。但有时候这些接口 API 可能是受限的，需要在本地搭建代理服务器以获取数据。在本文中，我们将介绍如何使用 JavaScript 从代理服务器中获取接口数据。

使用 XMLHttpRequest

XMLHttpRequest 是 JavaScript 中最基础的 AJAX 对象之一，它可以发送 HTTP 请求并获取响应数据。在使用 XMLHttpRequest 时，我们需要指定代理服务器的地址，并在请求头中加入跨域相关的信息。

下面是一个简单的示例代码：

const xhr = new XMLHttpRequest();
const method = "GET";
const url = "http://localhost:3000/api/data"; // 代理服务器地址
xhr.open(method, url);
xhr.onreadystatechange = function () {
  if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
    const data = JSON.parse(xhr.responseText);
    console.log(data);
  }
};
xhr.setRequestHeader("Content-Type", "application/json");
xhr.setRequestHeader("Access-Control-Allow-Origin", "*"); // 跨域相关信息
xhr.send();

在上述代码中，我们使用了 XMLHttpRequest 对象发起了一个 GET 请求。其中 url 参数指定了代理服务器的地址，而 onreadystatechange 函数则监听了请求状态的变化。

在请求头中，我们需要加入跨域相关的信息，包括 Content-Type 和 Access-Control-Allow-Origin 等。其中 Access-Control-Allow-Origin 是必须的，它指示服务器允许任何源进行跨域访问。

当请求状态为 XMLHttpRequest.DONE（4）且状态码为 200 时，我们可以认为请求成功，此时可以将响应数据以 JSON 格式解析并输出。

使用 Fetch

Fetch 是 ES6 中引入的一种网络请求 API，使用起来相对于 XMLHttpRequest 更简洁，但仍需要指定代理服务器地址和跨域相关信息。

下面是一个使用 Fetch 的示例代码：

const url = "http://localhost:3000/api/data"; // 代理服务器地址
const options = {
  method: "GET",
  headers: {
    "Content-Type": "application/json",
    "Access-Control-Allow-Origin": "*", // 跨域相关信息
  },
};
fetch(url, options)
  .then((response) => response.json())
  .then((data) => console.log(data));

在上述代码中，我们使用了 fetch 函数发起了一个 GET 请求。其中 url 参数指定了代理服务器的地址，而 options 参数则用于指定跨域相关的信息。

当响应数据返回时，我们可以使用 then 函数解析 JSON 格式的数据并输出。

总结

使用 JavaScript 获取代理 API 数据需要在请求头中加入跨域相关的信息，以便代理服务器正确响应请求。在本文中，我们介绍了使用 XMLHttpRequest 和 Fetch 两种方式发起网络请求并获取数据的方法。

更多关于 XMLHttpRequest 和 Fetch 的使用方式可以参考官方文档：

• XMLHttpRequest
• Fetch