Shopify应用中如何从后端PHP脚本返回数据并规避Ngrok错误页面？

你在Shopify应用中通过Ajax请求后端PHP脚本时，请求虽显示成功，但返回的是Ngrok的ERR_NGROK_6024错误页面，而非预期数据。以下是针对性的解决步骤：

1. 校验Shopify应用代理配置 #

• 确认代理的目标URL完整指向你的Ngrok后端接口，比如https://xxx.ngrok.io/tools/app-script，不能只填Ngrok域名
• 检查代理的子路径前缀是否和Ajax请求的路径匹配：如果代理前缀设为/tools，那么请求URL/tools/app-script才会正确转发到后端

2. 解决Ngrok免费版的限制 #

ERR_NGROK_6024是免费版Ngrok的限制导致：当请求来自外部域名（如Shopify的.myshopify.com域名）时，会触发验证页面。可通过以下方式处理：

• 临时测试：直接在浏览器打开你的Ngrok后端接口URL，手动完成一次验证，短时间内代理请求会恢复正常
• 长期解决方案：升级Ngrok到付费版，解锁跨域请求和自定义域名权限，避免此类限制
• 若Ngrok控制台支持，添加你的Shopify店铺域名到允许的Referer列表中（免费版可能不支持此功能）

3. 修正Ajax请求的细节 #

• 修复datatype的拼写错误：应为dataType（首字母大写），否则jQuery不会自动解析JSON，会把返回的HTML直接当成结果
• 调整shop参数：window.location.href会返回完整URL，Shopify通常只需要店铺域名（如your-shop.myshopify.com），可改用Shopify.shop（需加载Shopify SDK）或从URL中提取域名
• 确保后端PHP脚本返回正确的JSON格式，并设置响应头：

  header('Content-Type: application/json');
  echo json_encode($your_data);
  exit;
  

4. 排查后端PHP脚本 #

• 直接在浏览器访问Ngrok后端接口（带上参数），若返回的也是Ngrok错误页面，说明问题出在Ngrok配置；若返回正常JSON，说明是Shopify代理的配置问题
• 检查PHP脚本是否有意外输出HTML、重定向的代码，确保只输出JSON数据

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