JS JSOP跨域请求实例详解

什么是跨域请求？

跨域请求是指在一个来源（即域名、端口、协议都相同）的网页中，不能发起对另一个来源的网页的请求。这是由浏览器的同源策略所限制的。

当在一个网页中通过 AJAX、Fetch、WebSocket 等方式向另一个域名（或主机名、端口号、协议）发起请求时，由于安全原因，浏览器会拦截这些请求，而这种被拒绝的请求就称为“跨域请求”。

为什么需要跨域请求？

在 Web 开发中，跨域请求是常见的需求。

例如，站点 A 的前端需要向站点 B 的服务端发起请求获取数据，但由于两个域名不同，因此不能直接发起请求，需要通过跨域方式来实现。此时，就需要使用跨域请求技术。

JSONP 是什么？

JSONP（JSON with Padding）是一种跨域请求方式，通过动态创建 <script> 标签，将返回的数据作为 JS 脚本执行，从而实现跨域请求。

JSONP 的核心原理在于：当前页面动态创建一个 <script> 标签，请求跨域服务器的数据，而接受到返回数据时，则是调用当前页面中预先定义好的函数，将返回数据作为参数传入，进而处理数据。

JSONP 的优点：

不受同源策略的限制，实现跨域请求
兼容性好，在老版本的浏览器、移动端等场景下都有良好的支持
界面友好，用户体验佳

JSONP 的缺点：

安全性问题，存在 XSS 攻击的风险
只支持 GET 方式的请求

JSONP 的实现步骤

在 HTML 页面中创建一个 <script> 标签，指定请求的地址及需要回调的函数。

```html

```

getData 是服务端提供的接口 URL，callback 是指定需要回调的函数名，handleData 是在自己的 JS 中定义的函数名。

服务端需要读取 URL 中的 callback 参数，并将数据通过此函数返回。

javascript function getData(req, res) { const responseData = { username: 'Alice', age: 18 }; const callbackName = req.query.callback; // 获取回调函数名 res.send(`${callbackName}(${JSON.stringify(responseData)})`); }

此处以 Node.js 为例，使用 res.send 方法返回数据。
客户端实现回调函数。

javascript function handleData(data) { console.log(data.username); // 输出 "Alice" console.log(data.age); // 输出 18 }

示例一：使用 JSONP 跨域请求百度搜索结果

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JSONP 示例</title>
</head>
<body>
  <script>
    function handleData(data) {
      const result = document.querySelector('#result');
      const links = data.g.map(d => `<li><a href="${d.u}">${d.k}</a></li>`).join('');
      result.innerHTML = `<ul>${links}</ul>`;
    }
  </script>
  <div>
    <input id="keyword" type="text" placeholder="请输入关键词">
    <button onclick="search()">搜索</button>
  </div>
  <div id="result"></div>
  <script>
    function search() {
      const keyword = document.querySelector('#keyword').value;
      const url = `https://www.baidu.com/su?wd=${keyword}&cb=handleData`;
      const script = document.createElement('script');
      script.src = url;
      document.body.appendChild(script);
    }
  </script>
</body>
</html>

示例二：使用 JSONP 跨域请求阿凡达数据接口

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JSONP 示例</title>
</head>
<body>
  <div>
    <input id="keyword" type="text" placeholder="请输入角色名称">
    <button onclick="search()">搜索</button>
  </div>
  <div id="result"></div>
  <script>
    function handleData(data) {
      const result = document.querySelector('#result');
      const links = data.data.map(d => `<li>${d.name} / ${d.affiliation}</li>`).join('');
      result.innerHTML = `<ul>${links}</ul>`;
    }
  </script>
  <script>
    function search() {
      const keyword = document.querySelector('#keyword').value;
      const url = `https://jsonp.afeld.me/?url=https://www.avatarapi.com/api/v1/characters/search&name=${keyword}&access_token=demo`;
      const script = document.createElement('script');
      script.src = url;
      document.body.appendChild(script);
    }
  </script>
</body>
</html>

以上两个示例演示了使用 JSONP 跨域请求的实现方法。需要注意的是，JSONP 虽然能够实现跨域请求，但也存在一定的安全风险。在前端使用 JSONP 时，应注意数据的合法性和安全性，避免被攻击者利用漏洞进行 XSS 攻击。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JS JSOP跨域请求实例详解 - Python技术站