当你在浏览器中处理来自不同来源或域的资源时，就会出现跨域请求问题。例如，你的网站向其他域托管的 API 发起请求时，浏览器会阻止该请求出于安全考虑。跨域请求阻塞是同源策略的结果，旨在防止恶意网站访问敏感信息。
为了解决跨域请求问题，JavaScript 提供了一种名为 JSONP（JSON with padding）的技术。JSONP 是一种巧妙的方法，允许跨域请求数据，而不会违反同源策略。
JSONP 的工作原理
JSONP 依赖于回调函数。它涉及以下步骤：
- 客户端动态生成
<script>元素，并将其 src 属性设置为指向目标域的 URL。URL 包含一个回调函数名称作为查询参数。 - 目标服务器接收请求，生成 JSON 响应，并将其封装在回调函数中。
- 客户端的
<script>元素将 JSONP 响应作为 JavaScript 代码执行，有效地回调预定义的函数。
演示代码：
假设你有以下代码从其他域获取数据：
const fetchJSONP = (url, callback) => {
const script = document.createElement("script");
script.src = `${url}?callback=${callback}`;
document.head.appendChild(script);
};
fetchJSONP("https://example.com/api/data", (data) => {
console.log(data);
});在这个示例中：
fetchJSONP()函数接受一个包含目标 URL 和回调函数名称的参数。- 它动态生成一个
<script>元素，并将其 src 属性设置为目标 URL，其中包含回调函数名称作为查询参数。 <script>元素附加到<head>，向服务器发起请求。- 目标服务器生成 JSON 响应，并将其封装在回调函数中，如：
myCallback({ ... })。 - 客户端的
<script>元素执行 JSONP 响应，调用预定义的回调函数myCallback()并传递 JSON 数据。
优点：
- 绕过跨域请求限制
- 简单易用，只需添加额外的
<script>元素 - 广泛的浏览器兼容性
缺点：
- 需要目标服务器支持 JSONP
- 可能存在 JSONP 劫持漏洞，但可以通过实施安全措施来缓解
- 仅适用于 GET 请求
结论：
JSONP 是一种强大的技术，可用于跨越不同域的请求并获取数据。它简单有效，但需要目标服务器的支持。通过理解 JSONP 的工作原理并利用演示代码，你可以轻松地将其集成到你的项目中，从而解决跨域请求问题。
