Vue.js调用Square Catalog API时出现Axios Network Error求助

核心原因 #

Square的Connect API不支持从前端浏览器直接调用，哪怕是沙箱环境。你遇到的模糊Network Error本质还是跨域限制导致的，只是未抛出明确错误：

• Square的API端点未配置允许前端域名的CORS响应头，当前端代码携带Authorization头（SDK自动添加）发起请求时，浏览器会先发送OPTIONS预检请求，Square服务器拒绝该请求，导致请求被拦截，表现为Network Error。
• 直接在浏览器地址栏访问URL能成功，是因为这是不带自定义请求头的简单GET请求，浏览器不会触发预检流程；而SDK调用会自动添加授权头，触发跨域拦截。
• 另外，把Square的access token放在前端代码里是极大的安全风险，一旦泄露，攻击者可完全控制你的Square账户。

解决方案：通过后端代理请求 #

必须通过自建后端服务中转Square API请求，步骤如下：

1. 搭建后端代理（以Node.js为例） #

创建简单的Express服务，在后端安全调用Square SDK，暴露接口给前端：

const express = require('express');
const { Client, Environment } = require('square');
const cors = require('cors');

const app = express();
app.use(cors({ origin: 'http://localhost:5174' })); // 指定允许的前端域名
app.use(express.json());

// 初始化Square客户端（access token存于后端，避免泄露）
const client = new Client({
  accessToken: '你的沙箱access token',
  environment: Environment.Sandbox
});

// 暴露给前端的商品目录接口
app.get('/api/square/catalog', async (req, res) => {
  try {
    const response = await client.catalogApi.listCatalog();
    res.json(response.result);
  } catch (error) {
    console.error('Square API调用失败:', error);
    res.status(500).json({ error: '获取商品目录失败' });
  }
});

app.listen(3000, () => {
  console.log('后端代理服务运行在 http://localhost:3000');
});

2. 修改Vue前端代码 #

不再直接调用Square SDK，改为请求自建后端接口：

// In vue component..
export default {
  async mounted() {
    try {
      const response = await fetch('http://localhost:3000/api/square/catalog');
      const catalogData = await response.json();
      console.log(catalogData);
    } catch (e) {
      console.log('请求失败:', e);
    }
  }
}

开发阶段优化（Vite） #

如果使用Vite开发，可配置本地代理避免跨域，无需修改前端请求地址：

// vite.config.js
export default {
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true
      }
    }
  }
}

之后前端只需请求/api/square/catalog即可自动转发到后端服务。

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