Facebook JavaScript SDK登录报错：JSON解析异常求助

问题重现 #

集成Facebook登录功能时，点击「登录Facebook」按钮触发以下JSON解析异常：

SyntaxError: Unexpected token '\', "\"{\"user_id\"... is not valid JSON
    at String.parse (<anonymous>)
    at b (sdk.js?hash=8acbe35817b4d0360dfcebc5a49d83b8:41:1617)
    at Object.decodeObject (sdk.js?hash=8acbe35817b4d0360dfcebc5a49d83b8:84:1174)
    at Object.a [as parse] (sdk.js?hash=8acbe35817b4d0360dfcebc5a49d83b8:85:183)
    at sdk.js?hash=8acbe35817b4d0360dfcebc5a49d83b8:112:3924
    at Object._xdRecv (sdk.js?hash=8acbe35817b4d0360dfcebc5a49d83b8:152:14710)
    at sdk.js?hash=8acbe35817b4d0360dfcebc5a49d83b8:152:14123
    at s (sdk.js?hash=8acbe35817b4d0360dfcebc5a49d83b8:149:2288)
    at sdk.js?hash=8acbe35817b4d0360dfcebc5a49d83b8:149:2782

错误原因分析 #

这个错误发生在Facebook SDK内部的跨域通信（_xdRecv）解析环节，核心原因是SDK收到的响应内容被意外转义，导致JSON格式失效：

• 服务器/CDN的自动HTML转义功能，把JSON中的引号转成了"，进而被SDK解析成转义字符\
• 页面字符编码非UTF-8，导致特殊字符解析异常
• 嵌套的FB.login调用导致响应重复处理，引发解析混乱
• 页面中其他脚本重写了原生JSON.parse方法，干扰SDK的解析逻辑

修复步骤及代码调整 #

1. 修正SDK加载的字符串转义问题 #

代码中SDK的src使用了HTML实体"，在JS环境中应直接使用普通双引号，避免解析异常：

(function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) { return; }
    js = d.createElement(s); js.id = id;
    // 替换HTML实体"为普通双引号
    js.src = "https://connect.facebook.net/en_US/sdk.js";
    fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

2. 移除嵌套的FB.login调用，避免递归冲突 #

原代码中statusChangeCallback内嵌套调用FB.login，容易导致响应被重复处理，将登录逻辑抽离为独立函数：

function triggerFbLogin() {
    FB.login(function(response) {
        if (response.authResponse) {
            statusChangeCallback(response);
        } else {
            console.log('用户取消登录或未完成授权');
        }
    }, { scope: 'public_profile,email' });
}

function statusChangeCallback(response) {
    console.log('statusChangeCallback');
    console.log('Response:', response);

    if (response.status === 'connected') {
        $('.fb-login-button').hide();
        const src = $('.fb-login-button').data('src');
        if (!src) return;

        FB.api('/me?fields=id,name,email,picture.type(large),hometown', function(apiResponse) {
            console.log("FB API Response:", apiResponse);
            // 后续逻辑保持不变
        });
    } else if (response.status === 'not_authorized') {
        console.log('用户已登录Facebook，但未授权当前应用');
        triggerFbLogin(); // 调用独立的登录函数
    } else {
        console.log('用户未登录Facebook');
        triggerFbLogin(); // 调用独立的登录函数
    }
}

3. 检查服务器/CDN的转义设置 #

• 临时关闭服务器端的HTML自动转义功能（比如PHP的htmlspecialchars、Nginx的安全插件）
• 禁用CDN的HTML优化、自动转义功能，测试是否恢复正常

4. 确保页面字符编码为UTF-8 #

在HTML头部添加明确的编码声明：

<meta charset="UTF-8">

5. 排查第三方脚本干扰 #

检查页面中是否有其他脚本重写了JSON.parse方法，可在控制台执行以下命令验证：

console.log(JSON.parse.toString());

如果输出不是原生函数的代码，说明该方法被篡改，需要移除对应的第三方脚本。

验证方法 #

修复后，点击登录按钮时，观察控制台是否再出现JSON解析错误，同时确认FB.api能正常返回用户数据。

内容的提问来源于stack exchange，提问作者Ali