在Vue中使用JSONP进行跨域数据传输的完整指南

更新时间：2023年06月18日 08:26:38 作者：布衣1983

本文将介绍JSONP（JSON with Padding）的原理和用法，以及如何使用JSONP进行跨域数据传输，详细解释JSONP的工作原理，并提供前端和后端的代码示例，帮助你理解和实践JSONP跨域请求,需要的朋友可以参考下

什么是JSONP？

在Web开发中，跨域请求是指从一个域名下的网页向另一个域名下的服务器发送请求。由于同源策略的限制，JavaScript的XMLHttpRequest对象只能发送同源请求，这导致了跨域请求的限制。JSONP通过动态创建

JSONP的原理如下

客户端（浏览器）创建一个<script>标签，其src属性指向服务器端的资源URL。服务器端返回的资源内容是一个包裹在函数调用中的JSON数据，例如：callbackFunction({data: "example"})。客户端的<script>标签接收到服务器返回的内容后，将其作为JavaScript代码执行。

客户端预先定义了一个与服务器端返回的函数名相同的全局函数，服务器端返回的数据将作为参数传递给这个全局函数，从而实现数据的获取和处理。

虽然JSONP是一种实现跨域数据传输的方法，但它的安全性较差，因为客户端需要信任服务器端返回的代码，并且服务器端需要特殊处理以支持JSONP请求。近年来，由于安全风险，JSONP逐渐被使用更为安全的跨域解决方案（如CORS）所取代。

使用JSONP进行跨域数据传输的代码示例

下面是一个完整的JSONP跨域请求的示例，包括前端和后端的代码。

前端代码

<!DOCTYPE html>
<html>
<head>
  <title>JSONP Example</title>
</head>
<body>
  <h1>JSONP Example</h1>
  <script>
    // 定义回调函数，用于处理服务器端返回的数据
    function processData(data) {
      console.log(data);
      // 在这里进行数据处理或显示操作
    }
    // 创建一个<script>标签，指定服务器端的资源URL和回调函数名
    var script = document.createElement('script');
    script.src = 'http://example.com/api/data?callback=processData';
    document.body.appendChild(script);
  </script>
</body>
</html>

上述前端代码会创建一个<script>标签，并将其src属性指向服务器端的资源URL。在URL的末尾，使用callback=processData参数将回调函数名传递给服务器端。

后端代码

以下是使用Node.js作为后端服务器的示例代码：

const http = require('http');
const server = http.createServer((req, res) => {
  // 解析请求URL，获取回调函数名
  const callback = req.url.split('=')[1];
  // 模拟服务器返回的数据
  const data = { message: 'Hello, JSONP!' };
  // 将数据包装在回调函数中，构造响应内容
  const response = `${callback}(${JSON.stringify(data)})`;
  // 设置响应头，指定响应为JavaScript脚本
  res.writeHead(200, { 'Content-Type': 'application/javascript' });
  // 返回响应内容
  res.end(response);
});
const port = 3000;
server.listen(port, () => {
  console.log(`Server running at http://localhost:${port}`);
});

上述后端代码创建了一个简单的HTTP服务器，当收到请求时，解析请求URL中的回调函数名，并将数据包装在回调函数中返回给客户端。服务器返回的内容是JavaScript脚本，其中包含回调函数的调用和数据。确保将实际的接口地址和路径替换为服务器的地址和路径，并确保服务器端能够正确处理JSONP请求并返回合适的响应。

为vue封装一个jsonp自定义hooks！

当在Vue中使用JSONP进行跨域请求时，可以封装一个自定义的Hooks，方便在组件中重复使用。下面是一个简单的示例，展示如何封装一个JSONP的自定义Hooks。

// useJsonp.js
import { ref } from 'vue';
export default function useJsonp(url) {
  const responseData = ref(null);
  const isLoading = ref(false);
  const error = ref(null);
  // 发起JSONP请求
  function fetchData() {
    // 创建全局回调函数名
    const callbackName = `jsonpCallback${Date.now()}`;
    // 创建一个<script>标签
    const script = document.createElement('script');
    // 定义全局回调函数，用于处理服务器端返回的数据
    window[callbackName] = function (data) {
      // 清除全局回调函数
      delete window[callbackName];
      // 更新响应数据
      responseData.value = data;
      isLoading.value = false;
    };
    // 设置<script>标签的src属性，包括URL和回调函数名
    script.src = `${url}&callback=${callbackName}`;
    // 设置加载状态
    isLoading.value = true;
    // 处理加载失败的情况
    script.onerror = function () {
      isLoading.value = false;
      error.value = new Error('Failed to load data.');
    };
    // 将<script>标签添加到文档中
    document.body.appendChild(script);
  }
  return {
    responseData,
    isLoading,
    error,
    fetchData
  };
}

在上述示例中，我们创建了一个名为useJsonp的自定义Hooks。该Hooks接受一个URL参数，用于指定JSONP请求的目标地址。在Hooks中，我们使用ref函数创建了响应式的responseData、isLoading和error变量，分别用于存储响应数据、加载状态和错误信息。

fetchData函数用于发起JSONP请求。我们在函数内部动态创建一个全局回调函数，并将其绑定到window对象上，用于处理服务器返回的数据。创建一个<script>标签，并将URL和回调函数名设置为其src属性。同时，我们也处理了加载失败的情况，并更新相应的状态。

通过返回responseData、isLoading、error和fetchData等变量，我们可以在Vue组件中使用这些变量和方法进行数据获取和展示。

以下是一个在Vue组件中使用该自定义Hooks的示例：

<template>
  <div>
    <button @click="fetchData" :disabled="isLoading">Fetch Data</button>
    <div v-if="isLoading">Loading...</div>
    <div v-else-if="error">{{ error }}</div>
    <div v-else>{{ responseData }}</div>
  </div>
</template>
<script>
import useJsonp from './useJsonp';
export default {
  setup() {
    const { responseData, isLoading, error, fetchData } = useJsonp('http://example.com/api/data');
    return {
      responseData,
      isLoading,
      error,
      fetchData
    };
  }
};
</script>

在上述示例中，我们在Vue组件的setup函数中调用useJsonp('http://example.com/api/data')来使用useJsonp自定义Hooks。我们从useJsonp中获取responseData、isLoading、error和fetchData等变量，并在模板中使用它们进行数据展示和操作。当点击按钮时，调用fetchData方法触发JSONP请求，并根据加载状态和错误信息展示相应的内容。这样，我们就成功封装了一个JSONP的自定义Hooks，并在Vue组件中使用它进行跨域数据请求和展示。

请注意，在实际使用中，你需要将URL参数替换为实际的JSONP请求地址，并根据需要进行适当的修改和扩展。

总结

本文介绍了JSONP的原理和用法，以及如何使用JSONP进行跨域数据传输。我们详细解释了JSONP的工作原理，包括前端创建<script>标签、服务器端返回包裹在函数调用中的JSON数据以及客户端处理数据的过程。

尽管JSONP是一种实现跨域数据传输的方法，但由于安全性较差，现代Web开发更倾向于使用更安全的跨域解决方案，如CORS（Cross-Origin Resource Sharing）。在实际开发中，根据具体需求和安全考虑，选择合适的跨域解决方案。

以上就是在Vue中使用JSONP进行跨域数据传输的完整指南的详细内容，更多关于Vue JSONP跨域数据传输的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

Vue组合式API--setup中定义响应式数据的示例详解
在Vue2.x中，编写组件的方式是使用Options API，它的特点是在对应的属性中编写对应的功能模块，这篇文章主要介绍了Vue组合式API--setup中定义响应式数据详解,需要的朋友可以参考下
2022-10-10
vue开发中遇到的问题总结
在本篇文章里小编给大家分享的是关于vue开发中遇到的问题总结，有兴趣的朋友们可以学习参考下。
2020-04-04
vue+iview tabs context-menu 弹出框修改样式的方法
今天遇到一个需求说页面顶部的菜单右键弹出框离得有点远,需要我们做调整,下面小编给大家分享下vue+iview tabs context-menu 弹出框修改样式的方法,感兴趣的朋友跟随小编一起看看吧
2024-06-06
基于Vue 2.0 监听文本框内容变化及ref的使用说明介绍
今天小编就为大家分享一篇基于Vue 2.0 监听文本框内容变化及ref的使用说明介绍，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-08-08
Vue中动态添加ref的方法详解
在Vue.js项目中,ref是一个非常有用的功能,它可以用来获取DOM元素或子组件的实例引用,通过ref,我们可以在父组件中直接操作子组件的方法和属性,或者对DOM元素进行直接操作,本文将详细介绍如何在Vue中动态添加ref,并通过多个具体的代码示例来帮助读者理解其实现过程
2024-10-10
Vue中v-show添加表达式的问题(判断是否显示)
这篇文章主要介绍了关于Vue中v-show中添加表达式用于判断是否显示的问题,很多朋友经常会遇到这样的需求，有数据来源和标签类型两行选项，需要实现点击上面的某个数据来源时，标签类型自动切换功能，感兴趣的朋友一起看看吧
2018-03-03
vue实现键盘输入支付密码功能
这篇文章主要为大家详细介绍了vue实现键盘输入支付密码功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-08-08
VUE实现一个Flappy Bird游戏的示例代码
这篇文章主要介绍了VUE实现一个Flappy Bird的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-04-04
Vue 2.0学习笔记之Vue中的computed属性
本篇文章主要介绍了Vue 2.0学习笔记之Vue中的computed属性，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-10-10
vue中组件的3种使用方式详解
这篇文章主要给大家介绍了关于vue中组件的3种使用方式，文中通过示例代码介绍的非常详细，对大家学习或者使用vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
2019-03-03