跨域解决方案-JSONP

最新推荐文章于 2024-08-22 11:40:28 发布

@皮皮榴

最新推荐文章于 2024-08-22 11:40:28 发布

阅读量373

点赞数 4

分类专栏：浏览器网络 Javascript基础文章标签： javascript 前端

本文链接：https://blog.csdn.net/qq_39357822/article/details/138249103

版权

Javascript基础同时被 3 个专栏收录

30 篇文章 1 订阅

订阅专栏

网络

8 篇文章 0 订阅

订阅专栏

浏览器

2 篇文章 0 订阅

订阅专栏

简单了解JSONP

在CORS出现之前，开发者们用一种奇妙的办法来实现跨域–JSONP。

要实现JSONP，需要浏览器和服务器来一个“完美”配合。

JSONP的做法是：当需要跨域请求时，不使用AJAX，转而生成一个script元素去请求服务器，由于浏览器并不阻止script元素的请求，这样请求可以到达服务器。服务器拿到请求后，响应一段JS代码，这段代码实际上是一个函数调用，调用的是客户端预先生成好的函数，并把浏览器需要的数据作为参数传递到函数中，从而间接的把数据传递给客户端。

在这里插入图片描述

但是，JSONP有着明显的缺点，即其只能支持GET请求。

代码理解JSONP

页面部分：

<!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>
    <button>点击获取用户</button>
    <script>
      function callback(resp) {
        console.log(resp);
      }

      function request(url) {
        const script = document.createElement('script');
        script.src = url;
        script.onload = function () {
          script.remove();
        };
        document.body.appendChild(script);
      }

      document.querySelector('button').onclick = function () {
        request('http://localhost:8000/api/user');
      };
    </script>
  </body>
</html>

node服务：

const express = require('express');

const app = express();
const path = '/api/user';
const users = [
  { name: 'xiaofang', age: 17, sex: 'female' },
  { name: 'xiaohong', age: 27, sex: 'male' },
  { name: 'xiaoming', age: 37, sex: 'male' },
];
app.get(path, (req, res) => {
  res.setHeader('content-type', 'text/javascript');
  res.send(`callback(${JSON.stringify(users)})`);
});

const port = 8000;
app.listen(port, () => {
  console.log(`server listen on ${port}`);
  console.log(`request for users: http://localhost:${port}${path}`);
});