前端调用Shopify Admin API出现CORS跨域错误如何解决？

"Access to XMLHttpRequest at 'https://API_KEY:PASSORD@NAME.myshopify.com/admin/api/2021-07/orders.json' from origin 'null' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource."

上述报错和你使用axios还是fetch没有关系，是Shopify官方本身就不允许浏览器前端直接调用Admin API，没有配置对应的CORS跨域头。
此外你直接在前端请求路径中拼接API_KEY和PASSWORD的行为属于严重安全漏洞，任何人都可以通过抓包或者查看前端源码获取到你的店铺管理员凭证，直接操作店铺的全部后台数据，这也是Shopify不为Admin API开放前端调用权限的核心原因。

• 方案1：后端服务代理转发（最推荐，适合线上生产环境） #

  所有前端需要调用Admin API的请求，都先发送到你自己的后端服务，由后端服务携带API密钥转发请求到Shopify，拿到返回结果后再回传给前端。既绕开了CORS限制，也能避免API密钥泄露。
  以下是极简的Node.js Express代理示例：

  const express = require('express');
  const axios = require('axios');
  const app = express();
  const PORT = 3000;
  
  // 允许前端跨域调用你的代理接口
  app.use(require('cors')());
  
  app.get('/api/shopify/orders', async (req, res) => {
    try {
      const shopifyResponse = await axios.get('https://你的店铺名称.myshopify.com/admin/api/2021-07/orders.json', {
        auth: {
          username: '你的Shopify API_KEY',
          password: '你的Shopify PASSWORD'
        }
      });
      res.json(shopifyResponse.data);
    } catch (error) {
      res.status(error.response?.status || 500).json(error.response?.data || { message: '请求Shopify接口失败' });
    }
  });
  
  app.listen(PORT, () => console.log(`代理服务已启动，端口：${PORT}`));
  

  前端直接请求http://你的后端服务地址/api/shopify/orders即可获取订单数据。

• 方案2：更换适配前端的API #

  如果你是开发嵌入Shopify后台的应用，使用Shopify App Bridge获取授权凭证后调用对应接口；如果是面向买家的店铺前端场景，改用Shopify Storefront API，该API是官方专门为前端调用设计的，支持CORS，仅开放买家可访问的公开数据权限，不会泄露后台敏感信息。

• 方案3：本地临时测试方案（仅可用于本地调试，绝对禁止线上使用） #

  本地测试时可以使用浏览器跨域插件关闭CORS限制，或者使用抓包工具给Shopify响应手动添加Access-Control-Allow-Origin: *头，该方法仅可用于临时验证接口逻辑，绝对不能上线使用，也不要把带密钥的请求写在前端代码中。

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