Vue项目使用axios调用Shopify Admin接口遇CORS报错解决方案

CORS报错和你的密钥是否合法没有任何关联。Shopify Admin API 从设计层面就禁止浏览器端直接发起调用：接口响应默认不会返回Access-Control-Allow-Origin相关头，不管你请求参数、密钥是否正确，浏览器都会拦截响应。
这套限制本质是安全防护：Admin API的访问令牌拥有店铺的最高管理权限，可以修改商品、读取所有订单、调整店铺配置，如果允许前端直接调用，你写在代码里的令牌会被所有访问站点的用户通过F12开发者工具直接拿到，等于把店铺后台完全公开。Shopify正是为了避免这类风险，才从接口层屏蔽了浏览器端的直接调用。

你可以根据自己的业务场景二选一：

• 走服务端代理（适配所有需要调用Admin API的场景）
  所有涉及Admin API的请求，全部由你自己的服务端发起：前端把请求参数发给自有后端，后端携带存储在环境变量里的Admin访问令牌请求Shopify接口，拿到结果后再返回给前端。服务端发起HTTP请求不受浏览器CORS规则限制，同时密钥不会暴露到客户端，没有安全风险。
  本地开发阶段可以直接用Vue构建工具自带的代理能力快速调试，不用临时搭建后端。以Vite为例，在vite.config.js中添加如下配置即可：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  server: {
    proxy: {
      '/shopify-api': {
        target: 'https://你的店铺域名.myshopify.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/shopify-api/, '/admin/api/2021-10'),
        headers: {
          'X-Shopify-Access-Token': '你的Admin访问令牌'
        }
      }
    }
  }
})

配置完成后，前端把请求地址改成/shopify-api/checkouts.json，移除前端代码里的X-Shopify-Access-Token请求头即可正常调用。注意：这个代理配置仅在本地开发环境生效，线上部署时必须替换为自有服务端的代理逻辑。

• 换用面向前端设计的Storefront API
  如果你只是需要获取商品数据、发起结账这类面向顾客侧的操作，完全不需要使用Admin API，直接用Shopify官方提供的Storefront API即可。这个接口是专门为前端调用设计的，默认支持CORS，使用的Storefront访问令牌仅拥有前端必要的只读/顾客操作权限，就算暴露也不会产生店铺被篡改的风险。
  注意：Storefront API不支持任何店铺管理类操作，如果你的需求涉及商品修改、全量订单读取、店铺配置调整，必须使用服务端代理的方案，没有其他绕过方式。

• 不要尝试通过修改浏览器安全设置、JSONP等方式绕过CORS，前者仅在你自己的设备上生效，普通用户访问依然报错，后者不支持自定义请求头，无法传递Admin令牌。
• 永远不要把Admin访问令牌写在任何前端代码、打包后的静态资源里，哪怕做了代码混淆，抓包或者源码检索就能直接拿到密钥。
• 不要试图给Shopify侧发请求要求配置CORS白名单，官方明确不支持浏览器直接调用Admin API，这类请求不会得到支持。

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