我的jsonp解决跨域请求

最新推荐文章于 2023-07-12 16:55:05 发布

谢去非

最新推荐文章于 2023-07-12 16:55:05 发布

阅读量166

点赞数

分类专栏：解决跨域文章标签： js javascript vue

本文链接：https://blog.csdn.net/ryyzxf/article/details/109443586

版权

解决跨域专栏收录该内容

2 篇文章 0 订阅

订阅专栏

我的jsonp解决跨域请求

原理
jQuery发送请求

原理

1.jsonp是一个非官方的跨域解决方案，只支持get请求。
2.jsonp解决跨域请求，是利用script标签的跨域能力来发送请求的，使服务器返回js代码，或函数调用，以实现跨域。
客户端代码
在客户端定义一个函数，通过script标签向服务端发送请求，在服务端把函数的调用返回，客户端解决函数的调用。

<body>
    用户名：<input type="text" id='username'>
    <p></p>
    <script>
        // 获取input元素
        const input = document.querySelector('input');
        const p = document.querySelector('p');

        // 声明handle函数
        function handle(data) {
            input.style.border = 'solid 1px #f00';
            // 修改p标签的文本内容
            p.innerHTML = data.msg;
        }
        // 绑定事件
        input.onblur = function() {
            // 获取用户的输入值
            let username = this.value;
            // 向服务端发送请求 检测用户名是否存在
            // 1.创建script标签
            const script = document.createElement('script');
            // 2.设置标签的src属性
            script.src = 'http://127.0.0.1:3000/check-username';
            // 将这个script插到文档中
            document.body.appendChild(script);
        }
    </script>
</body>

服务器端代码

// 检测用户名是否存在
app.all('/check-username', (request, response) => {
  const data = {
    exsit: 1,
    msg: '用户名已经存在'
  }
  let str = JSON.stringify(data);
  response.send(`handle(${str})`);
})

jQuery发送请求

http://127.0.0.1:3000/jquery-jsonp-server?callback=?
**callback=?**的值必须是？
客户端

<body>
    <button>点击发送 jsonp 请求</button>
    <div id='result'></div>
    <script>
        $('button').eq(0).click(function() {
            $.getJSON('http://127.0.0.1:3000/jquery-jsonp-server?callback=?', function(data) {
                $('#result').html(`
                        名称：${data.name}</br>
                        房产地址：${data.city}
                `)
            })
        })
    </script>
</body>

服务器端

app.all('/jquery-jsonp-server', (request, response) => {
  const data = {
    name: 'xf',
    city: ['北京', '西安', '上海', '深圳']
  }
  let str = JSON.stringify(data);
  // 接收callback参数
  let cb = request.query.callback;
  // 返回结果
  response.send(`${cb}(${str})`);
})