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

Question

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

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方式拿不到信息

Answer 1

话说，你确定有跨域问题？

Answer 2

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

Answer 3

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

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

Answer 4

如果你通过 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 相关的策略或限制。