第三方服务器加载数据的方式的JSONP指南🏠 返回首页 JSONP是一种从第三方服务器加载数据的方式，绕过了同源策略

JSONP是一种从第三方服务器加载数据的方式，绕过了同源策略

默认情况下，你不能从一个非当前的域名和端口加载JSON文件，并在你的应用程序中使用它。

你可能从localhost:8080 ，但API是由另一个运行在localhost:2001 的Node.js应用程序提供的。

或者你可能想在浏览器中访问一些以JSON形式提供的公开可用的API。

这是一个消费API的常见需求，但在浏览器中我们受到限制，因为出于安全原因，由于相同来源政策，这种行为必须被默认拒绝，以防止可能的问题。

JSONP 诞生于CORS存在之前。今天，CORS是一个更（唯一的一个？）合理的方法，但了解JSONP也是有用的，它可能对你的情况更好。另外，自JSONP诞生以来，围绕它发现了一些安全问题，所以你需要了解使用JSONP的所有安全影响。

JSONP只支持GETHTTP方法，所以它的能力比CORS差很多。

服务器必须有对JSONP的支持，例如Express允许你使用Response.jsonp() 方法，这就像Response.json() ，但处理JSONP的回调。

res.jsonp({ username: 'Flavio' })

在客户端，你加载指定回调函数的端点。

<script src="http://localhost:2001/api.json?callback=theCallbackFunction"></script>

回调函数必须是一个全局的，将接收JSON数据。

const theCallbackFunction = (data) => {
  console.log(data)
}

jQuery有一个方便的方法，通过在其ajax() 方法中抽象出JSONP来简化这种方法。

$.ajax({
  url: 'http://localhost:2001/api.json',
  dataType: 'jsonp',
  success: (data) => {
    console.log(data)
  }
})