实现JSONP请求

一个爬坑的Coder

已于 2023-09-13 17:23:50 修改

阅读量972

点赞数

分类专栏： JavaScript学习文章标签： javascript

于 2023-09-13 17:23:03 首次发布

本文链接：https://blog.csdn.net/qq_39583550/article/details/124482002

版权

JavaScript学习专栏收录该内容

10 篇文章 0 订阅

订阅专栏

同源策略

JavaScript 的浏览器都会使用这个策略。所谓同源是指，域名，协议，端口相同。
而所有非同源的请求（即域名，协议，端口其中一种或多种不相同），都会被作为跨域请求。实际上请求发了, 也返回了数据, 只是浏览器检测到时非同源的数据, 就会被浏览器丢掉

然后标签发出的请求不会被同源策略检测到, 因此可以用来发送请求, 如script, img等标签

JSON实现流程

请添加图片描述

定义全局函数, 发送请求(客户端)

<!DOCTYPE html>
<html lang="en">
  <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>
    <script>
      window.test = (data) => {
        console.log(data);
      };
    </script>
    <script src="http://localhost:3000/test?callback=test"></script>
  </body>
</html>

接收数据, 返回数据(后端)

const Koa = require("koa");
const app = new Koa();
const Router = require("koa-router");
const router = new Router({
  prefix: "/test",
});

app.use(router.routes());
router.get("/", async (ctx) => {
  ctx.body =
    ctx.query.callback +
    "(" +
    JSON.stringify({
      code: "200",
      data: {
        name: "chenjiang",
      },
    }) +
    ")";
});

app.listen(3000, (res) => {
  console.log("启动成功");
});

浏览器network

一个爬坑的Coder

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
实现JSONP请求

同源策略JavaScript 的浏览器都会使用这个策略。所谓同源是指，域名，协议，端口相同。而所有非同源的请求（即域名，协议，端口其中一种或多种不相同），都会被作为跨域请求。实际上请求发了, 也返回了数据, 只是浏览器检测到时非同源的数据, 就会被浏览器丢掉然后标签发出的请求不会被同源策略检测到, 因此可以用来发送请求, 如script, img等标签JSON实现流程定义全局函数, 发送请求(客户端)<!DOCTYPE html><html lang="en"&gt
复制链接

扫一扫

专栏目录