JS JSOP跨域请求实例详解

JS JSOP跨域请求实例详解

什么是跨域请求?

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

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

为什么需要跨域请求?

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

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

JSONP 是什么?

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

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

JSONP 的优点:

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

JSONP 的缺点:

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

JSONP 的实现步骤

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

```html

```

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

  1. 服务端需要读取 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 方法返回数据。

  2. 客户端实现回调函数。

    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技术站

(0)
上一篇 2023年5月27日
下一篇 2023年5月27日

相关文章

  • js防抖-节流函数的基本实现和补充详解

    JS防抖和节流函数的基本实现和补充详解 在Web应用中,为了提升用户体验及减轻服务器压力,我们通常会使用JS防抖和节流函数来控制代码执行的频率及节约资源的使用。本文将对JS防抖和节流函数的基本实现进行详细的讲解,同时也会补充一些重要的知识点。 JS防抖函数的基本实现 JS防抖函数的原理是将多次触发的事件合并为一次触发,从而减少触发事件的次数,提高代码性能。比…

    JavaScript 2023年6月11日
    00
  • javascript与cookie 的问题详解

    JavaScript与Cookie的问题详解 在这篇攻略中,我将分享一些关于 JavaScript 和 Cookie 的基础知识,解释它们之间的关系以及一些常见的问题。 什么是JavaScript? JavaScript 是一门编程语言,通常用于为网页添加交互性和动态效果。与 HTML 和 CSS 不同,JavaScript 可以让网页与用户交互并响应用户的…

    JavaScript 2023年6月11日
    00
  • JS实现的ajax和同源策略(实例讲解)

    当网页需要与服务器进行数据交互时,可以使用JS实现的ajax技术。然而,同源策略限制了网页只能与同一域名下的服务器进行数据交互,从而保证了用户数据的安全性。下面将详细讲解JS实现的ajax和同源策略的完整攻略,包括如何使用ajax发送请求、如何处理响应数据、如何设置同源策略等内容。 AJAX AJAX(Asynchronous JavaScript and …

    JavaScript 2023年6月11日
    00
  • js验证电话号码与手机支持+86的正则表达式

    要验证电话号码与手机是否支持+86,我们需要使用正则表达式。 以下是一个通用的正则表达式,用于检查电话号码或手机号是否正确: /^((0\d{2,3}-\d{7,8})|(1[34578]\d{9}))$/ 让我们详细分析这个正则表达式: ^表示字符串开头。 (表示一个捕获分组的开始。 0\d{2,3}-\d{7,8}匹配固定电话号码,其中0后面是2或3个数…

    JavaScript 2023年6月10日
    00
  • js数组去重常见的方法汇总(7种)

    下面我将详细讲解“js数组去重常见的方法汇总(7种)”。 一、引言 在JavaScript的实际开发中,经常会遇到需要对数组进行去重操作的情况。而JavaScript提供了多种方法来进行数组去重操作,下面将详细介绍七种常见的方法。 二、使用Set Set是ES6新引入的一种集合数据类型,它可以存储任意类型的唯一值。使用Set可以很方便地实现数组去重,只需要将…

    JavaScript 2023年5月27日
    00
  • Web前端开发规范2017(HTML/JavaScript/CSS)

    Web前端开发规范旨在规范前端开发,提高代码质量,增强代码可读性和可维护性。本文将详细讲解“Web前端开发规范2017(HTML/JavaScript/CSS)”的完整攻略。 HTML规范 DOCTYPE 统一使用HTML5标准的文档类型声明: <!DOCTYPE html> <html> … </html> 编码 使…

    JavaScript 2023年5月19日
    00
  • JavaScript版本迷局介绍

    标题: JavaScript版本迷局介绍 1. 为什么会存在JavaScript版本问题 在一些JavaScript项目中,我们经常听到一些版本的说法,如“ES6”、“ES8”、“Node.js v8”等等,这些版本实际上指的是不同的JavaScript规范。由于JavaScript语言的快速发展,JavaScript不同版本之间出现了一些规范的差异,这就导…

    JavaScript 2023年5月18日
    00
  • Html获取登陆用户名的示例代码

    获取登录用户名是Web开发中很常见的需求。本文将分享两个示例代码,分别使用前后端不同的技术,帮助你在自己的网站中获取登录用户名。 1. 基于后端Session的示例代码 如果你的网站是基于后端Session来实现用户登陆的,那么你可以使用下面的这段PHP代码来获取当前登录用户的用户名: <?php session_start(); if(isset($…

    JavaScript 2023年6月11日
    00
合作推广
合作推广
分享本页
返回顶部