@shopify/shopify-app-remix应用加载失败：浏览器Cookie问题求助

问题详情 #

通过npm init @shopify/app@latest生成应用，执行npm run dev并在Shopify商店安装后，弹出错误提示：

This app can’t load due to an issue with browser cookies. Try enabling cookies in your browser, switching to another browser, or contacting the developer to get support.

环境信息：

• @shopify/shopify-app-remix 版本1.1.0
• Node版本18.6.1
• 操作系统Windows 11

预期：应用正常安装并显示演示页
实际：弹出上述Cookie相关错误
复现步骤：

1. 执行npm init @shopify/app@latest
2. 执行npm run dev
3. 将应用安装到Shopify商店
4. 启动应用时触发错误

排查与解决步骤 #

1. 调整浏览器Cookie设置 #

Shopify嵌入应用依赖第三方Cookie完成认证，需确保浏览器允许第三方Cookie：

• 打开浏览器隐私设置，找到Cookie相关选项，勾选「允许所有Cookie」（开发环境临时启用，生产环境可按需调整）
• 若使用Chrome，路径为设置 > 隐私和安全 > Cookie及其他网站数据

2. 信任本地开发HTTPS证书 #

Shopify应用强制要求HTTPS，本地开发的自签名证书可能未被Windows信任：

• 执行npm run dev时，按终端提示完成证书信任配置
• 手动操作：找到.shopify/app/ssl目录下的证书文件，导入到Windows「受信任的根证书颁发机构」

3. 检查会话配置 #

打开app/shopify.server.js，确认会话Cookie属性配置正确：

// 示例配置（开发环境）
sessionStorage: new Shopify.Session.SessionStorageMemory(),
auth: {
  path: "/auth",
  callbackPath: "/auth/callback",
},
// 确保Cookie的sameSite属性在开发环境设为'lax'，生产环境设为'none'（需配合secure: true）

4. 清除浏览器缓存与Cookie #

• 删除当前Shopify商店域名及本地开发域名（如localhost:3456）的所有Cookie和缓存
• 重启浏览器后重新安装应用

5. 升级依赖版本 #

@shopify/shopify-app-remix 1.1.0存在已知兼容性问题，升级到最新稳定版：

npm install @shopify/shopify-app-remix@latest

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