简单使用jsonp进行跨域访问

最新推荐文章于 2025-03-28 14:26:01 发布

低级亡灵

最新推荐文章于 2025-03-28 14:26:01 发布

阅读量319

点赞数

分类专栏： javascript 文章标签： javascript nodejs ajax跨域问题

本文链接：https://blog.youkuaiyun.com/qq_43674062/article/details/115919792

版权

javascript 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了JSON和JSONP的区别与作用，重点讨论了JSONP如何用于解决JavaScript跨域问题。通过一个简单的前后端示例，展示了JSONP的工作原理，包括后端返回包裹在函数调用中的JSON数据，以及前端如何定义并调用这个回调函数来接收和处理数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一.简介

首先，先搞清楚json和jsonp:

json

JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。易于人阅读和编写。同时也易于机器解析和生成。

JSON 是 JS 对象的字符串表示法，它使用文本表示一个 JS 对象的信息，本质是一个字符串。

如

var obj = {a: 'Hello', b: 'World'}; //这是一个对象，注意键名也是可以使用引号包裹的
var json = '{"a": "Hello", "b": "World"}'; //这是一个 JSON 字符串，本质是一个字符串

jsonp

JSONP是一种非正式传输协议，该协议的一个要点就是允许用户传递一个callback 或者开始就定义一个回调方法，参数给服务端，然后服务端返回数据时会将这个callback 参数作为函数名来包裹住 JSON 数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了。

二.作用

jsonp主要用于解决跨域问题，并且请求方式只能用get.

它的实现代码就是使用 document.createElement(‘script’) 生成一个 script 标签，再把需要请求的api地址放到src里. 这个请求只能用GET方法, 不可能是POST。

使用方法

简单示例：

后端代码（node）:

const express = require("express");
const app = express();

app.listen(8088, () => {
  console.log("服务启动");
});

app.get("/", (req, res) => {
  const a = {
    text: "hello world",
    id: 1,
  };
  res.send(a);
});

前端代码:

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div>
    </div>
    <script>
      fetch("http://localhost:8088/")
        .then(function (res) {
          return res.json();
        })
        .then(function (res) {
          console.log(res);
        });
    </script>
  </body>
</html>

此时，打开控制台会看到

这是由于浏览器的同源策略导致不能获取到后台的数据

使用jsonp解决：

后台代码：

const express = require("express");
const app = express();

app.listen(8088, () => {
  console.log("服务启动");
});

app.get("/", (req, res) => {
  const a = {
    text: "hello world",
    id: 1,
  };
  res.send("callback(" + JSON.stringify(a) + ")");
});

前端代码：

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="div1">
    </div>
    <script>
      function callback(data) {
        console.log(data);
      }
    </script>
    <script src="http://localhost:8088/" type="text/javascript"></script>
  </body>
</html>

此时，打开控制台，就可以看到从后台获取到的数据