同源策略是Web安全的基础，它是指来自同一源的文档或脚本与来自另一个源的资源进行交互时所遵循的一些规则。所谓“同源”指的是，协议、域名和端口号都相同。如果一个页面违反了同源策略，浏览器会将其视为跨域页面，从而禁止或限制页面的某些功能。
具体来说：
- 协议：指的是网页使用的协议，如HTTP或HTTPS。
- 域名：指的是网页所在的域名。
- 端口号：指的是网页所在的服务器端口。
当以上三者完全一致时，浏览器会认为这些资源是同源的，允许它们之间进行安全交互。反之，如果三者中有任何一个不一致，浏览器就会将这种情况视为跨域，并可能根据同源策略限制页面的某些功能。
因此，开发者在设计和开发Web应用时需要特别注意同源策略，以确保页面的安全性和功能性。
端⼝号、域名、协议名，三者必须全部相同才符合同源策略，反之即为跨域
JSONP（JSON with Padding）是一种通过动态脚本标签（<script>）实现跨域数据请求的技术。由于同源策略的限制，直接使用 XMLHttpRequest 或 Fetch API 进行跨域请求时，浏览器会阻止请求并抛出错误。而 JSONP 通过动态插入 <script> 标签的方式绕过了同源策略的限制，实现了跨域数据请求。
JSONP 的基本原理是：
- 在服务器端返回一个
<script>标签，该标签的 src 属性指向一个外部的 JavaScript 文件。 - 在 JavaScript 文件中，通过调用一个回调函数来将数据作为参数传递给它。
- 在客户端，创建一个全局函数来作为回调函数，并将它命名为与服务器端返回的函数名相匹配的名称。
- 当浏览器加载外部 JavaScript 文件时，会自动执行该文件中的代码，并调用回调函数，将数据传递给它。
下面是一个简单的 JSONP 实现示例：
服务器端（JSONP 响应）:
function getData() {
return "{\"name\":\"John\"}";
}
var script = document.createElement("script");
script.src = "http://example.com/api?callback=getData";
document.body.appendChild(script);
在这个示例中，服务器端创建了一个名为 getData 的函数，并通过动态创建 <script> 标签，将它的 src 属性设置为一个跨域的 API 请求。在 API 请求中，通过 callback 参数指定了回调函数的名称。
客户端（JSONP 请求）:
function callback(data) {
console.log(data);
}
在这个示例中，客户端创建了一个名为 callback 的函数，并将其作为回调函数。当浏览器加载外部 JavaScript 文件时，会自动执行该文件中的代码，并调用 getData 函数。getData 函数将返回的数据作为参数传递给 callback 函数，从而实现了跨域数据请求。