JSONP的原理是什么？解决什么问题？

JSONP (JSON with Padding) 是一种用于绕过浏览器同源策略的技巧，它允许网页从不同域名的服务器请求数据。它利用了 <script> 标签不受同源策略限制的特点。

原理：

1. 动态创建 <script> 标签: 前端 JavaScript 代码动态创建一个 <script> 标签。
2. 设置 src 属性: 将目标服务器的 URL 设置为 <script> 标签的 src 属性。这个 URL 包含要请求的数据以及一个回调函数名。例如：https://example.com/data?callback=myCallback。
3. 服务器端响应: 服务器端接收到请求后，将数据包装在指定的回调函数中，然后返回 JavaScript 代码。例如：myCallback({"name": "Gemini", "version": "Pro"});
4. 浏览器执行回调函数: 浏览器下载并执行返回的 JavaScript 代码。这会调用预先定义好的回调函数 myCallback，并将数据作为参数传递给它。
5. 前端处理数据: 在 myCallback 函数中，前端代码可以访问接收到的数据并进行处理。

解决的问题：

JSONP 主要解决的是跨域数据请求的问题。在 Web 开发中，同源策略限制了从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一种重要的安全机制，可以防止恶意网站窃取用户数据。然而，它也限制了从不同域名获取数据的合法需求。JSONP 提供了一种变通方案，允许跨域请求数据。

局限性：

• 只支持 GET 请求: JSONP 只能用于 GET 请求，不支持 POST 等其他 HTTP 方法。这是因为 <script> 标签只能发出 GET 请求。
• 安全性问题: 由于 JSONP 依赖于执行从外部服务器返回的 JavaScript 代码，因此存在一定的安全风险。如果目标服务器不可信，可能会返回恶意代码。
• 错误处理困难: JSONP 没有提供标准的错误处理机制。如果请求失败，很难获取详细的错误信息。

现代替代方案：

如今，更推荐使用 CORS (Cross-Origin Resource Sharing) 来实现跨域请求。CORS 是一种更安全、更灵活的解决方案，它允许服务器明确指定哪些域名可以访问其资源。 如果服务器支持 CORS，则应优先使用 CORS 而不是 JSONP。 只有在 dealing with legacy systems 不支持 CORS 的情况下才考虑使用 JSONP。