跨域iFrame嵌入餐厅订座页面报JSON语法错误问题求助

这不是数据格式问题，错误是跨域嵌入场景下的第三方Cookie拦截策略触发重定向导致的。

报错原因解析 #

你看到的Unexpected token < in JSON at position 0错误，本质是前端代码预期接口返回JSON格式，但实际拿到的是重定向后的HTML页面内容（HTML文件以<开头，所以JSON解析到第一个字符就抛出异常）。

浏览器差异说明 #

Chrome、Edge、Safari等主流浏览器默认会拦截跨域iframe场景下的第三方Cookie：如果你的订座系统的接口校验依赖Cookie识别用户会话，当页面被嵌入到外域站点时，请求无法携带你的站点Cookie，后端判定会话无效就会触发重定向，返回登录页/首页的HTML内容，导致解析失败。
Firefox当前的第三方Cookie默认拦截策略相对宽松，所以没有复现问题，后续Firefox也会逐步收紧相关策略，现有逻辑未来也会在Firefox上出现异常。

修复方案 #

• 调整接口身份校验逻辑，不再依赖Cookie传递身份信息，改用JWT等凭证放在请求头中传递
• 若必须使用Cookie，在你站点所有的Set-Cookie响应头中添加SameSite=None; Secure属性，明确告知浏览器该Cookie允许跨域场景下携带，注意该配置仅在HTTPS环境下生效
• 补充前端异常捕获逻辑，当JSON解析失败时判断响应内容类型，如果为HTML说明触发重定向，可直接在iframe内引导用户完成身份验证，或给出对应提示

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