如何通过App Proxy在Shopify店铺展示需鉴权的外部API数据

整体实现逻辑是通过App Proxy做请求中转，前端Liquid发起的请求先到Shopify，再转发到你的Node应用，Node应用携带Hulk API的鉴权密钥请求第三方接口，拿到数据后再返回给前端，避免敏感密钥暴露在前端代码中。

1. App Proxy配置字段填写说明 #

进入合作伙伴后台的App Proxy配置页后，按以下规则填写即可：

• 子路径前缀：直接选择系统提供的apps选项，无需自定义
• 子路径：填写自定义的辨识度高的字符即可，比如hulk-options，后续请求路径会用到这个字段
• 代理URL：填写你的Node应用的公网可访问地址+自定义接口路由，开发阶段用ngrok做内网穿透的话，示例为https://xxx.ngrok.io/api/hulk-options，该路由需要和后续Node应用里写的接口路由保持一致
  填写完成后保存配置，Shopify会自动将指向你店铺https://你的店铺域名/apps/hulk-options/*的请求转发到你填写的代理URL。

2. Node应用代码修改步骤 #

通过shopify node create生成的项目，默认入口文件为server.js或index.js，直接在该文件中添加路由代码即可。

前置准备 #

• 先去Hulk API后台获取你的专属API密钥，在项目根目录的.env文件中添加配置：HULK_API_KEY=你申请到的密钥
• 终端执行npm install axios安装请求工具

代码示例 #

const axios = require('axios');
require('dotenv').config();

// 在项目默认初始化的express实例之后添加如下路由，路由路径要和代理URL的后缀一致
app.get('/api/hulk-options', async (req, res) => {
  try {
    // 接收前端传来的参数，比如需要查询的产品ID
    const productId = req.query.product_id;
    // 发起第三方API请求，携带鉴权头
    const hulkRes = await axios.get('https://productoption.hulkapps.com/public/api/options', {
      headers: {
        'Authorization': `Bearer ${process.env.HULK_API_KEY}`
      },
      params: {
        product_id: productId
        // 补充其他Hulk API要求的必填参数
      }
    });
    // 直接将第三方接口返回的数据返回给前端，Shopify会自动处理跨域问题
    res.status(200).json(hulkRes.data);
  } catch (err) {
    res.status(500).json({ error: '数据获取失败' });
  }
});

该Node应用是中转请求的核心服务，需要保持公网可访问状态，开发阶段用ngrok做内网穿透即可，上线后可以部署到Vercel、Heroku等平台。

3. Liquid主题内请求地址说明 #

前端AJAX请求直接用相对路径即可，格式为/apps/你配置的子路径，比如之前子路径填的是hulk-options，请求路径就是/apps/hulk-options，不需要填写完整域名，避免跨域问题。

前端代码示例 #

可以直接把这段代码加在产品详情页对应的Liquid模板中：

// 注入当前产品ID，Liquid变量会自动渲染为对应数值
const currentProductId = {{ product.id }};
fetch(`/apps/hulk-options?product_id=${currentProductId}`)
  .then(res => res.json())
  .then(data => {
    // 拿到返回的产品选项数据后，自行渲染到页面对应位置即可
    console.log('产品选项数据：', data);
  })
  .catch(err => console.error('请求失败：', err));

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