JavaScript跨域方法汇总

跨域是指在浏览器中执行的 JavaScript 代码不能够访问其它来源的数据。常见的场景是：当前页面代码想要请求第三方接口数据，但是该接口数据不允许跨域访问，导致请求失败。为了解决这种情况，我们需要使用跨域方法。

本文将介绍几种常用的 JavaScript 跨域方法，以及它们的优缺点。

1. JSONP

JSONP 是一种跨域方法，它利用了 HTML script 标签的跨域能力，实现了跨域请求数据的功能。

具体实现过程：

1. 定义一个全局函数
2. 创建一个 script 标签，src 属性指向目标接口，同时在该 URL 中将要执行的回调函数的名称通过查询参数的方式传递过去
3. 当该 script 标签加载完毕后，目标接口会直接调用该回调函数，在回调函数中将需要的数据作为参数传递给函数
4. 在全局函数中对数据进行处理

JSONP 的优点在于它比较简单，只需要对接口返回的数据进行处理即可，跨域实现方式比较简单。但它的缺点是，只能使用 GET 方法，无法支持 POST、DELETE 等 HTTP 方法。

示例1

假如我们想要获取必应搜索中搜索 “JavaScript” 的结果，需要使用 JSONP。

1. 先定义一个全局函数 handleData

javascript
function handleData(data) {
console.log(data);
}

1. 创建 script 标签，src 设置为拼接后的必应搜索接口地址，将回调函数名称设置为 handleData，然后添加到 DOM 中。

javascript
const script = document.createElement("script");
script.src = `https://api.bing.com:443/qsonhs.aspx?action=web.qs&query=JavaScript&cp=1&cs=1&cb=handleData`;
document.body.appendChild(script);

2. CORS

CORS 是一种跨域方法，它通过在服务端设置 Access-Control-Allow-Origin 响应头实现了在浏览器中跨域访问接口数据。

具体实现过程：

1. 客户端发起 AJAX 请求
2. 服务器端设置允许跨域请求的响应头，包括 Access-Control-Allow-Origin、Access-Control-Allow-Methods、Access-Control-Allow-Headers 等字段
3. 如果客户端发送的 AJAX 请求包含 cookie 等敏感数据，则需要在 AJAX 请求中添加参数 withCredentials: true，同时服务器端需要设置 Access-Control-Allow-Credentials 响应头为 true

CORS 的优点在于可以实现完整的 HTTP 请求方式，而且支持 cookie 等敏感信息的传递。但它的缺点是需要服务端设置响应头。

示例2

假如我们想要使用 AJAX 请求 GitHub 上的仓库信息，需要使用 CORS。

const xhr = new XMLHttpRequest();
xhr.open("GET", "https://api.github.com/repos/facebook/react", true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    const data = JSON.parse(xhr.responseText);
    console.log(data);
  }
};
xhr.send();

3. 代理

代理是一种跨域方法，它在服务端进行请求转发，并将接口数据返回给客户端。

具体实现过程：

1. 客户端发起 AJAX 请求
2. 服务器端代理该请求，向目标接口发起请求，并将目标接口返回的数据返回给客户端
3. 客户端对接口返回的数据进行处理

代理的优点在于可以实现较为复杂的请求逻辑，而且不需要在客户端进行跨域处理。但它的缺点是需要在服务端实现请求转发。

示例3

假如我们想要使用 AJAX 请求 Google Search 上的关键词提示信息，但是它不允许跨域访问。我们可以借助代理实现请求转发。

1. 先编写服务器代理脚本，向目标接口发起请求，并将目标接口返回的数据返回给客户端

```javascript
const express = require("express");
const axios = require("axios");
const app = express();

app.get("/suggest", async (req, res) => {
const { query } = req.query;
const response = await axios.get("https://www.google.com/complete/search", {
params: {
q: query,
cp: 0,
client: "psy-ab"
}
});
res.json(response.data);
});

app.listen(3000, () => {
console.log("Server Started...");
});
```

1. 在客户端发起 AJAX 请求

javascript
const xhr = new XMLHttpRequest();
xhr.open("GET", "http://localhost:3000/suggest?query=JavaScript", true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
const data = JSON.parse(xhr.responseText);
console.log(data);
}
};
xhr.send();

以上就是本文介绍的 JavaScript 跨域方法，包括 JSONP、CORS 和代理三种方式，同时也提供了两个示例：使用 JSONP 实现必应搜索接口的跨域访问和使用代理实现谷歌搜索关键词提示信息的跨域访问。