解决跨域之JSONP

工大动车组

已于 2023-12-09 19:32:05 修改

阅读量106

点赞数

分类专栏：跨域文章标签：前端

于 2023-12-09 15:37:45 首次发布

本文链接：https://blog.csdn.net/y_0232/article/details/134895958

版权

跨域专栏收录该内容

3 篇文章 0 订阅

订阅专栏

前言

大家可能遇到过这种报错

at '****' from origin '****' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

什么是跨域？

可以详见这篇文章：什么是跨域？

如何解决跨域呢？

下面小编会介绍下解决跨域的方法之一，JSONP。

JSONP原理

JSONP（JSON with Padding）是一种用于解决跨域请求的技术，它的原理是通过动态创建一个回调函数，并将其作为查询参数传递给跨域服务器。服务器接收到请求后，会将响应的数据以回调函数的形式返回给客户端，客户端的 JavaScript 引擎会自动执行这个回调函数，从而获取到响应的数据。

具体来说，JSONP 的工作流程如下：

客户端发送跨域请求，在请求的 URL 中添加一个回调函数的名称作为查询参数，例如 callback=callbackFunction 。
服务器接收到请求后，解析查询参数中的回调函数名称，并将响应的数据封装成一个 JSON 字符串，然后在 JSON 字符串的前面或后面添加回调函数的调用代码，例如 callbackFunction({}) 。
服务器将包含回调函数调用代码的 JSON 字符串返回给客户端。
客户端的 JavaScript 引擎接收到响应后，会自动解析出其中的 JSON 数据，并将其作为参数传递给回调函数。
回调函数在客户端执行，从而获取到了跨域响应的数据。

JSONP 的原理利用了 JavaScript 的特性，即可以在页面上动态创建和调用函数。通过这种方式，客户端可以突破跨域限制，从其他域的服务器获取数据。

例子

假设你有一个后端服务提供了一个 API，用于获取数据。后端服务的 URL 是 https://backend.example.com/data ，它返回以下 JSON 数据：

{
  "status": 200,
  "message": "成功",
  "data": {
    "users": [
      {
        "name": "John",
        "age": 25
      },
      {
        "name": "Alice",
        "age": 30
      }
    ]
  }
}

你的前端应用程序在不同的域（例如 https://frontend.example.com ）中，并且想要通过 JavaScript 代码来获取这个 JSON 数据。由于跨域限制，直接使用 XMLHttpRequest 或 Fetch 等方法是不可能的。

使用 JSONP，你可以创建一个回调函数，并将其作为查询参数传递给后端服务的 URL。后端服务将返回包含 JSON 数据的脚本代码，JavaScript 引擎将自动执行这个脚本，并将回调函数作为参数调用，从而将 JSON 数据传递给回调函数。

以下是一个使用 JSONP 的示例代码：

// 创建一个回调函数
function callback(data) {
  console.log(data);
}

// 创建 JSONP 请求的 URL
const url = `https://backend.example.com/data?callback=callback`;

// 创建 script 元素并设置其 src 属性为 JSONP 请求的 URL
const script = document.createElement("script");
script.src = url;

// 将 script 元素添加到页面上
document.head.appendChild(script);

在上述示例中，我们创建了一个名为 callback 的回调函数。然后，我们构建了 JSONP 请求的 URL，其中 callback=callback 将回调函数的名称作为查询参数传递给后端服务。最后，我们创建一个 script 元素，并将其 src 属性设置为 JSONP 请求的 URL。将 script 元素添加到页面上后，浏览器将自动发起请求，并在接收到响应后执行回调函数，将 JSON 数据传递给它。

请注意，JSONP 是一种不太安全的跨域请求方式，因为它依赖于服务器端的配合。服务器必须正确处理查询参数中的回调函数名称，并返回包含正确 JSON 数据的脚本代码。此外，JSONP 也可能受到一些安全限制，例如某些浏览器可能会限制或阻止跨域的脚本请求。

在实际应用中，建议优先考虑使用 CORS 或其他更安全的跨域请求方式。只有在特定的情况下，当其他跨域解决方案不可行时，才考虑使用 JSONP。