JSONP动态获取天气数据但无法收到响应的原因是什么?

一个页面想通过请求外部地址如 https://api.oioweb.cn/api/weather/GetWeather,直接通过ajax请求会有跨域问题, 动态获取天气信息,直接在浏览器输入可以看到返回内容 image.png,如何通过纯前端动态拿到返回的内容

var script = document.createElement('script');
script.type = 'text/javascript';

// 使用与后端定义的回调函数名一致的名称
script.src = 'https://api.oioweb.cn/api/weather/GetWeather?callback=handleWeatherData';
document.head.appendChild(script);

// 回调执行函数
function handleWeatherData(data) {
    console.log(data);
}
script.onerror = function(err) {
    console.error('Error loading script');
};

这样通过jsonp方式拿不到信息

阅读 1k
avatarAI BotBETA

如果你通过 JSONP 方式无法获取天气数据,可能有几个原因:

  1. 服务器不支持 JSONP:尽管你试图通过添加 callback 参数来请求 JSONP 数据,但如果服务器不支持 JSONP 或者没有正确配置,它将不会返回一个有效的 JSONP 响应。一个有效的 JSONP 响应应该看起来像这样:handleWeatherData({"weatherData": "..."});
  2. 回调名称错误或未定义:确保你定义的 handleWeatherData 函数在全局作用域内可用,因为 JSONP 是在全局作用域下调用回调函数的。如果这个函数在闭包或模块内部定义,它可能无法被 JSONP 调用。
  3. 跨域限制:虽然 JSONP 是一种绕过跨域限制的技术,但如果服务器设置了特定的 CORS 策略或防火墙规则,它可能会阻止来自你的网站的请求。
  4. 网络问题或服务器故障:确保服务器正常运行,且没有网络问题阻止你的请求。
  5. 错误处理:虽然你已经设置了 onerror 事件处理器,但确保它也正确执行。此外,如果服务器返回了一个 HTTP 状态码为 200 但内容不是有效的 JSONP,onerror 也不会被触发。
  6. 浏览器控制台错误和警告:检查浏览器控制台中的任何错误或警告消息,它们可能会提供更多关于问题的线索。
  7. 内容安全策略(CSP):某些网站可能实施了内容安全策略,这些策略可能会阻止动态加载的脚本执行。

为了调试这个问题,你可以尝试以下步骤:

  • 确保 handleWeatherData 函数在全局作用域内定义。
  • 使用浏览器的网络调试工具(如 Chrome DevTools 的 Network tab)来查看请求的响应。确保响应是一个有效的 JSONP 调用。
  • 尝试在不同的浏览器或设备上加载页面,以查看问题是否与特定浏览器或设备相关。
  • 检查服务器文档或联系服务器管理员以确认它是否支持 JSONP,并了解如何正确配置请求。
  • 如果可能的话,查看服务器返回的 HTTP 响应头,以了解是否有任何与 CORS 相关的策略或限制。
4 个回答

这个接口不支持jsonp,callback=handleWeatherData没反应,返回的还是json。

jsonp 是接口方要约定好的一个参数,前端通过callback=xxx传给接口方,接口方给你包成xxx({json})的方法调用方式给回前端浏览器运行。如果对方都没有这个设定,前端传也没有意义。

新手上路,请多包涵

此接口的响应格式为"application/json"。
ajax请求中content-type默认为"application/x-www-form-urlencoded",你可以改成"application/json"试试。
这种公共api,服务器都是支持跨域请求的,不然还有什么意义?
如果想了解更多的content-type,点它https://www.runoob.com/http/http-content-type.html

话说,你确定有跨域问题?

image.png

后端做一层代理也行

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏