day22 JSONP及练习讲解

最新推荐文章于 2024-11-11 19:29:13 发布

_大雄_

最新推荐文章于 2024-11-11 19:29:13 发布

阅读量72

点赞数

文章标签： javascript 前端 json

本文链接：https://blog.csdn.net/yuan1723936262/article/details/129596512

版权

文章详细介绍了浏览器的同源策略以及由此引发的跨域问题。JSONP作为一种解决跨域的方法，通过动态插入script标签和回调函数实现数据交换。文中提供了JSONP的简单示例和完整应用案例，强调了后端接口需支持JSONP并正确设置回调。另外，提到了服务器响应头Access-Control-Allow-Origin的设置和代理服务器在解决跨域问题中的作用。

摘要由CSDN通过智能技术生成

JSONP及练习讲解

文章目录

JSONP及练习讲解

浏览器的同源策略

同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。

同源策略包含的内容

域名一致
协议一致
端口一致

由于同源策略产生的跨域问题

请添加图片描述

解决方式

服务器在响应的时候添加对应的响应头：Access-Control-Allow-Origin

//后端大致代码
response.setResponseHeader('Access-Control-Allow-Origin',*)
response.setResponseHeader('Access-Control-Allow-Origin-Method',*)

客户端和服务端配合：JSONP

服务端提供的接口为jsonp接口
客户端通过script标签不受跨域影响的特效来接受对应的数据（通过回调函数）

使用代理

devserver代理（vue提供的用于测试）
服务器代理（Nginx等）

跨域问题是因为对应的TCP/UDP导致的，如果要解决，可以放弃TCP/UDP，使用webSocket（即时通信）

JSONP讲解

概述

JSONP是一种解决跨域的一种的方案，它实际上也是一个get请求，它是利用对应的script标签不受跨域影响的限制来解决对应的跨域问题。(带对应的href src等的标签都不受跨域的影响script link farmes等)

JSONP解决跨域必须具备的点

后端的接口必须为JSONP接口
前台使用script src链入的方式通过传入对应的回调函数来接受对应的结果

简单示例

准备一个JSONP接口

'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=miqi&cb=fn'

准备script标签链入JSONP地址

<!-- 
准备script标签链入JSONP地址
wd 表示对应的关键词
cb 表示回调函数 （服务器来执行）
-->
<script>
    // 全局变量属于window对象
    function callback(result) {
    	console.log(result);
	}
</script>
<script src="https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=前端开发&cb=callback"></script>

更完整的示例

// 获取元素
let ul = document.querySelector('.ul')
document.querySelector('input').onchange = function () {
    let wd = this.value
    console.log(wd);
    // 发送jsonp请求
    jspnp(wd)
}
// 全局变量属于window对象
window.callback = function ({s}) {
    ul.innerHTML = ''
    s.forEach(data => {
        ul.innerHTML+=`
            <li>${data}</li>
            `
    });
}
// 文本改变后的事件
function jspnp(wd) {
    let script = document.createElement('script')
    script.src = `https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=${wd}&cb=callback`
    // 先添加
    document.body.append(script)
    // 再删除
    document.body.removeChild(script)
}