小熊猫写前端 2024-03-10 11:23 采纳率: 60%
浏览 4

关于#html#的问题：%E8%A7%A3%E5%86%B3%E…（相关搜索：谷歌浏览器）


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>解决回调地狱</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
    <script>
        window.onload = function() {
            $.ajax({
            type:'GET',
            url:'./data1.json',
            dataType:'jsonp',
            success:function(res){
            const {id} = res
            console.log(res)
        }
        })}
    </script>
</head>
<body>
    
</body>
</html>

img

为什么我使用了jsonp请求谷歌浏览器还是报错

img


但是edge却可以正常发起请求收到结果呢？

img

  • 写回答

3条回答 默认 最新

  • 檀越@新空间 2024-03-10 11:27
    关注

    小熊猫写前端 上午好☀️☀️☀️️
    本答案参考ChatGPT-3.5

    您在使用HTML和jQuery通过jsonp方式发起GET请求时，在谷歌浏览器中遇到错误，但在Edge浏览器中能够正常获取数据。jsonp是跨域请求的一种方法，通常用于解决不同源之间Ajax请求的限制。

    问题可能的原因：

    1. JSONP请求的目标URL（./data1.json）可能存在跨域问题，尽管jsonp可以绕过同源策略，但如果服务器端没有正确设置支持jsonp跨域，谷歌浏览器依然会阻止请求。
    2. JSONP实现依赖于服务端返回带有callback函数调用的脚本，如callbackFunction({...data...})，而不是直接返回JSON对象 { "id":1 }。如果服务端未按照jsonp规范返回结果，也会导致谷歌浏览器报错。

    解决方案：

    • 确保服务器端支持JSONP，并正确处理callback参数，返回格式应为： 
      // 假设回调函数名称由jQuery自动指定为'jQuery112398075412345678_...'
jQuery112398075412345678_({ "id": 1 });
    • 检查并确认Chrome浏览器中的CORS设置是否被修改或禁用了某些权限，恢复到默认设置或者允许该特定URL的跨域请求。
    • 查看Chrome开发者工具（F12 或 右键检查）的网络面板(Network tab)，找到对应的请求，查看其响应内容及状态码，以确定具体错误原因。

    代码示例（假设服务端已正确配置JSONP）：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>解决JSONP请求问题</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
    <script>
        window.onload = function() {
            $.ajax({
                type: 'GET',
                url: './data1.json',
                dataType: 'jsonp', // 使用jsonp类型
                jsonpCallback: 'customCallback', // 如果需要自定义回调函数名，可以在这里指定
                success: function(res) {
                    const { id } = res;
                    console.log(res);
                },
                error: function(xhr, status, error) {
                    console.error('Error occurred:', xhr.status, status, error);
                }
            });
        };

        // 自定义全局jsonp回调函数，如果服务端不自动匹配callback，则需保持与jsonpCallback相同的名字
        window.customCallback = function(res) {
            const { id } = res;
            console.log(res);
        };
    </script>
</head>
<body>

</body>
</html>

    请根据实际情况调整上述代码中的jsonpCallback部分以及服务端返回的内容，确保它们相互配合正确执行JSONP请求。

    评论

报告相同问题？

问题事件

  • 修改了问题 3月10日
  • 创建了问题 3月10日