Django部署Unity WebGL应用调用Facebook SDK时Chrome出现CORS/CORB及登录异常

基础环境配置 #

• 开发版本：Unity 2019.4.20f1 Personal
• 部署链路：Django + Gunicorn 搭建搭载自签名证书的本地HTTPS服务器，托管WebGL构建产物
• 核心交互逻辑：项目唯一交互脚本为FacebookHelper，其中Login()、Logout()方法分别绑定到两个UI按钮触发，脚本完整代码如下：

public class FacebookHelper : MonoBehaviour
{

    // Awake function from Unity's MonoBehavior
    void Awake ()
    {
        if (!FB.IsInitialized) {
            // Initialize the Facebook SDK
            FB.Init(InitCallback, OnHideUnity);
        } else {
            // Already initialized, signal an app activation App Event
            FB.ActivateApp();
        }
    }

    private void InitCallback ()
    {
        if (FB.IsInitialized) {
            // Signal an app activation App Event
            FB.ActivateApp();
            // Continue with Facebook SDK
            // ...
        } else {
            Debug.Log("Failed to Initialize the Facebook SDK");
        }
    }

    private void OnHideUnity (bool isGameShown)
    {
        if (!isGameShown) {
            // Pause the game - we will need to hide
            Time.timeScale = 0;
        } else {
            // Resume the game - we're getting focus again
            Time.timeScale = 1;
        }
    }

    public void Login() {
        var perms = new List<string>(){"public_profile", "email"};
        FB.LogInWithReadPermissions(perms, this.AuthCallback);
    }

    public void Logout() {
        FB.LogOut();
        Debug.Log("User logged out.");
    }

    public void AuthCallback (ILoginResult result) {

        if (FB.IsLoggedIn) {
            // AccessToken class will have session details
            var aToken = Facebook.Unity.AccessToken.CurrentAccessToken;
            // Print current access token's User ID
            Debug.Log("UserID: " + aToken.UserId);
            // Print current access token's granted permissions
            foreach (string perm in aToken.Permissions) {
                Debug.Log("Permission: " + perm);
            }
        } else {
            Debug.Log("User cancelled login");
        }
    }
}

核心复现异常（仅Chrome触发） #

• 仅触发Logout()操作时抛出CORS、CORB报错，Login()操作不会触发同类错误
• 执行Login()操作时，弹出的登录新标签页未等输入账号密码就自动关闭，但日志仍显示Facebook SDK登录成功
• 跨浏览器对照：Safari浏览器无上述所有异常，登录流程运行正常
• 通用异常（Chrome、Safari均存在）：SDK初始化时会自动登录已留存的默认用户，初步计划在初始化阶段执行登出操作规避

已开展的排查操作 #

• 参考教程为Django应用开启CORS支持，报错未消除
• 在Facebook开发者平台完成全量配置：将localhost加入应用域名、启用跨域分享重定向、添加https://localhost:8080为网站地址、将该地址加入「游戏版Facebook登录」产品的有效OAuth重定向URI，异常仍存在
• 抓包对比发现：Chrome发起的相关请求未收到Facebook返回的Access-Control-Allow-Origin响应头，初步推测差异和Chrome请求携带的额外请求头有关

现有可落地解决方向 #

• 在SDK初始化成功的回调中，先主动执行登出操作清除本地留存的登录态，从根源解决自动登录、登录弹窗自动关闭的问题——弹窗自动关闭的本质是SDK检测到本地已存在有效登录态，无需触发交互输入流程
• 替换静态托管层：改用Nginx反向代理托管WebGL构建产物，在Nginx配置层自行添加统一的跨域响应头，覆盖本地链路的跨域请求响应，避免Logout流程的跨域请求被CORB拦截
• 解决证书信任问题：将本地自签名HTTPS证书导入Chrome的信任根存储列表，避免Chrome对未受信任来源的跨域请求做额外的头过滤，导致Facebook侧返回的CORS响应头不被浏览器识别

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