js的同源与跨域，jsonp跨域的流程和一些案例及问题

矫情吗；* 2023-05-28 14:13 21阅读 0赞

同源：两个网页的**协议**相同，**ip地址**相同，**端口**相同  
不同源：两个网页的**协议**，**ip地址**，**端口**三者有**任何一个不相同**  
跨域：**不同源的网站发送请求叫跨域访问**（浏览器**默认限制跨域访问**），为解决这个问题有两种方案——**cors（Cross Origin Resource sharing）、JSONP**。  
cors：**html5才支持**，只需要在**服务器**的具体文件里设置里面设置header("Access-Control-Allow-Origin:\*’)  
JSONP：**兼容性好**，是利用dom元素的**src属性**（**因为它自带支持跨域获取资源**），而dom元素有（**img标签、script标签**）  
接下来说说JSONP实现跨域链接

#### 1、script的src属性可以实现跨域访问 ####

我这里跨域访问信息并且仔细看**url**  
**http://192.168.0.3/test/test01.php?success=success**它里面是一个**PHP后端文件**，后面**还跟了一个参数**，名字是**success**，参数为**success**。  
**这里已经实现了跨域但是无法处理后台的数据**，接下来解决这问题

#### 2、success参数是什么呢 ####

function success(data) { 
                    alert(data);
                }

它是一个**函数**

#### 3、看看PHP文件里面有什么 ####

<?php
        $data='"你好"';
        echo $_GET["success"].'('.$data.')';

PHP里面用get方法获取这函数并且**拼了一个函数的调用返回到用来的js引用里面**，再在**js里面调用这函数**，这样就达到了**跨域获取数据**，并且可以自主处理数据，这就是jsonp的具体步骤

#### 4、一个上述的图解 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTk2OTc3Nw_size_16_color_FFFFFF_t_70]

#### 5、一些关于jsonp与ajax的问题和一些说明 ####

**jQuery的JSONP原理是自动创建了一个script标签利用src发送跨域请求，并返回一个带有数据的函数的调用，这里是把整个函数（带数据）给返回回来了**  
ajax与jsonp有没有关系？  
**没有，因为ajax是通过异步对象发送xhr文件，而jsonp是通过script发送的js文件**  
jQuery里的jsonp与ajax有没有关系？  
**没有，正如上面这个问题所说的，ajax与jsonp没有关系，而jQuery里面的jsonp自然是与ajax没有关系**  
JSONP能不能发送post请求？  
**不能，只能发送get请求，默认是get**  
jQuery里面的ajax与jQuery里面的jsonp的关系？  
**jQuery里面的jsonp只是jQuery里面的ajax的一个属性的值，只是为了方便集成到了一起罢了**

#### 6、一个完整的jQuery的ajax的外域请求 ####

**前端js**

$.ajax({ 
                            url:'http://192.168.0.3/test/test03.php',
                            type:'get',					//jsonp只能个体方式
                            data:{ 
                                uname:'li',
                                age:30
                            },
                            success:function (e) { 
                                console.log(e);
                            },
                            dataType:'jsonp',			//外域访问
                            jsonp: "callback",			//是设置路径里的参数名（即上面script里的前面的success），这句可以省略
                            jsonpCallback:"ooo",		//是设置路径里的函数名（即上面script里的后面的success），这句可以省略
                        });

**后端php**

echo $_GET['callback'].'({"uname":"li","age":50})';		//返回一个带数据的函数的调用，必须要写的

还有疑问的可以[戳这里][Link 1]  
本文只用于个人学习和记录

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTk2OTc3Nw_size_16_color_FFFFFF_t_70]: /images/20230528/aa41e9af86fa4920a26a42769f3e608a.png
[Link 1]: https://www.jianshu.com/p/1efe671832e0