如何从Salesforce Commerce Cloud(SFCC) Store Front页面发起REST API调用？

下面是两种常用的可落地实现方案，根据你的业务安全性、外部API支持情况选择即可：

1. 前端直接发起调用（客户端侧实现） #

• 适用场景：外部API已配置CORS跨域规则、请求无敏感认证信息、对数据安全性要求低的测试/轻量场景
• 实现方法：
  直接在Storefront对应ISML模板的绑定JS文件（SFRA架构下一般在client/default/js/自定义目录）中给按钮绑定点击事件，用原生fetch或者前端JS工具库直接发起请求，示例代码如下：

  document.querySelector('#custom-api-call-btn').addEventListener('click', async () => {
    try {
      const response = await fetch('https://你的外部系统API地址', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({
          // 业务请求参数，比如当前商品ID、用户公开ID等
        })
      })
      const result = await response.json()
      // 处理返回结果：比如更新页面内容、弹出操作提示等
    } catch (error) {
      // 异常处理逻辑
      console.error('API调用失败', error)
    }
  })
  

• 注意事项：
  • 必须提前确认外部系统API已允许你的SFCC站点域名跨域访问，否则会触发浏览器跨域拦截报错
  • 绝对不要在前端代码里硬编码API密钥、认证令牌等敏感信息，避免信息泄露
  • 所有请求参数、返回结果都要做合法性校验，避免注入类安全风险

2. 后端代理调用（服务端侧实现，生产环境推荐） #

• 适用场景：外部API不支持CORS、请求需要携带敏感认证信息、对数据安全/合规性有要求的生产场景，是绝大多数业务的首选方案
• 实现步骤：
  1. 自定义SFCC控制器，在服务端通过SFCC标准的dw.svc.RESTService框架调用外部API，将控制器暴露为站点内部可访问的接口路径，比如/Custom-CallExternalAPI，服务端示例代码如下：

  // 自定义控制器代码，示例路径cartridge/controllers/Custom.js
  var server = require('server');
  var RESTService = require('dw/svc/RESTService');
  var Site = require('dw/system/Site');
  
  server.post('CallExternalAPI', function(req, res, next) {
    // 从站点自定义偏好配置读取API密钥，不要硬编码敏感信息
    const apiAuthToken = Site.current.getCustomPreferenceValue('externalSystemAPIToken');
    // 调用BM中提前配置的REST服务实例
    const service = RESTService.get('External_API_Service_Instance');
    service.addHeader('Authorization', `Bearer ${apiAuthToken}`);
    service.addHeader('Content-Type', 'application/json');
    // 获取前端传入的业务参数
    const reqParams = JSON.parse(req.httpParameterMap.requestBody.value);
  
    const callResult = service.call(JSON.stringify(reqParams));
    if (callResult.ok) {
      res.json({
        success: true,
        data: callResult.object
      });
    } else {
      res.json({
        success: false,
        errorMsg: callResult.errorMessage
      });
    }
    next();
  });
  
  module.exports = server.exports();
  

  2. 前端按钮点击时仅调用同站点的自定义控制器接口即可，不会出现跨域问题，前端示例代码如下：

  document.querySelector('#custom-api-call-btn').addEventListener('click', async () => {
    try {
      const response = await fetch('/Custom-CallExternalAPI', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({
          // 业务请求参数
        })
      })
      const result = await response.json()
      // 处理返回结果
    } catch (error) {
      console.error('调用失败', error)
    }
  })
  

• 注意事项：
  • 外部API的地址、认证密钥、重试/超时规则全部在BM的服务配置、站点自定义偏好中维护，不要硬编码在代码里
  • 提前在BM中配置REST服务实例的熔断、降级规则，避免外部系统故障影响SFCC站点本身的可用性
  • 对前端传入的参数做严格校验过滤，避免恶意请求穿透到外部系统

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