从Stash检出Squidex本地运行Webpack Dev Server时登录弹窗报错消失

我之前也碰到过一模一样的问题，大概率是OIDC配置、后端服务状态或者跨域设置出了问题，咱们一步步来排查解决：

• 先确认后端服务是否正常运行
  前端登录依赖后端的OIDC认证端点，如果只启动了Webpack Dev Server而没启动Squidex后端，前端请求会返回HTML错误页面（比如404），但oidc-client期望的是JSON格式响应，碰到<、&这类HTML字符就会触发解析错误。
  解决方法：先启动Squidex后端——可以用dotnet run直接运行，或者用Docker启动容器。启动后访问http://localhost:5000/.well-known/openid-configuration（如果后端用了其他端口就替换成对应端口），确认返回的是标准的JSON格式内容。

• 检查前端OIDC配置是否正确
  前端的配置文件（一般是src/app/shared/config/app.config.ts）里，OIDC的authority字段必须指向你的本地后端地址，不能是线上地址或者错误端口。
  举个正确的配置示例：

  export const appConfig: AppConfig = {
      // 其他配置项...
      oidc: {
          authority: 'http://localhost:5000',
          clientId: 'squidex-frontend',
          redirectUri: 'http://localhost:3000/authentication/login-callback',
          postLogoutRedirectUri: 'http://localhost:3000/',
          responseType: 'code',
          scope: 'openid profile email squidex-api',
      }
  };
  

  修改配置后重启npm run dev，确保新配置生效。

• 配置后端允许跨域请求
  前端在localhost:3000，后端默认在localhost:5000，属于跨域场景，后端必须允许前端域名的跨域访问：

  • 如果用Docker启动后端，添加环境变量：-e SQUIDEX_CORS_ALLOWED_ORIGINS=http://localhost:3000
  • 如果用dotnet run启动，修改appsettings.json里的CORS配置：

    "Cors": {
        "AllowedOrigins": [
            "http://localhost:3000",
            "https://localhost:3000"
        ]
    }
    

  改完后重启后端服务，让CORS配置生效。

• 清除浏览器缓存和会话
  有时候浏览器缓存了旧的OIDC会话或配置信息，导致请求异常。打开浏览器开发者工具，清除缓存和Cookie，然后重新尝试登录。

• 查看具体错误响应内容
  打开浏览器开发者工具的Network标签，找到登录相关的请求（比如/.well-known/openid-configuration），查看响应内容：

  • 如果返回HTML错误页：说明后端没启动或者地址配置错误
  • 如果返回JSON但格式异常：检查后端OIDC配置是否正确

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