JavaScript-JSONP讲解

最新推荐文章于 2024-08-26 15:33:56 发布

小欧哥学前端

最新推荐文章于 2024-08-26 15:33:56 发布

阅读量2.3k

点赞数

分类专栏： JavaScript 文章标签： javascript 前端 html5

本文链接：https://blog.csdn.net/OuYyds/article/details/124215845

版权

本文介绍了JavaScript中的同源策略及其带来的跨域问题，详细解析了CORS和JSONP两种跨域解决方案。重点讲解了JSONP的工作原理，包括创建回调函数、设置全局方法以及如何与后端配合实现跨域请求。此外，还提到了ES7的async/await语法在处理Promise时的作用，以及this在不同场景下的指向规则。最后，讨论了深拷贝和浅拷贝的概念及其区别。

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

同源策略

出于安全性的考虑，浏览器只允许对应的两者是同源的内容进行交互和访问

不同源的内容不允许访问

CORS 跨域

跨域的问题（同源政策的影响）

1.访问协议不同（http，https)

2.域名不同

3.端口号不同(浏览器默认80)

4.走的是file协议，文件不一样也会跨域

解决跨域问题：

1.添加请求头，后端添加请求头 access-control-allow-origin:* 跨域的地址

2.前端也可以添加请求头 setRequestHeader

3.jsonp形式，利用 link script ifarme 这个标签不受跨域的影响，利用script标签（只能解决get请求跨域），利用了script标签链接对应的地址，然后让这个链接的地址给我们执行访问

Jsonp（页面访问形式）解决跨域

JSONP的方法，需要后端的支持

script 标签不遵从跨域，所以我们可以内部访问 js添加我们对应的方法，执行我们对应的传入的方法

1.创建方法，回调方法

2.将方法设置到window里面

3.将方法名和对应方法传入，如果需要参数传入对应的参数

function a(str){
    
}
//给窗口添加一个方法
window['abc']= a
window.cb()   //调用窗口的方法
let promise = ajax({
    url:"https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?cb=