Azure部署的前后端调用Autodesk Tandem API遇CORS问题及SDK咨询

一、CORS错误的核心原因 #

你的错误提示显示请求直接发送到https://tandem.autodesk.com/api/v1/groups，而非你的Azure App Service后端地址。这意味着前端没有通过后端代理转发请求，而是直接调用Autodesk的APS API——此时后端配置的CORS规则完全无效，因为CORS是浏览器对跨域请求的限制，只有当请求从前端发往你的后端时，后端的CORS配置才会生效；直接请求Autodesk的API，对方服务器未配置允许你的前端域名跨域，自然触发CORS错误。

二、是否应该在前端使用Autodesk Tandem SDK？ #

可以使用，但双legged认证模式下绝对不能在前端直接调用APS/Tandem API——双legged认证需要用到Client Secret，前端代码会暴露这个敏感信息，存在严重安全风险。正确做法是：前端所有访问APS/Tandem API的请求，都先发送到你的后端，由后端携带认证信息（通过Client ID/Secret获取的token）调用Autodesk的API，再将结果返回给前端。

三、规避CORS问题的具体步骤 #

1. 调整前端请求地址 #

修改前端代码，把原本直接指向https://tandem.autodesk.com的请求，改为你的Azure App Service后端代理地址（例如https://your-app-service.azurewebsites.net/api/proxy），让后端中转所有APS/Tandem API请求。

2. 完善后端配置 #

（1）修正CORS配置

确保后端CORS规则正确允许前端域名，若需携带凭证（如cookie）需开启credentials：

const cors = require('cors');
app.use(cors({
  origin: "https://my-static-web-app.azurestaticapps.net",
  credentials: true,
  allowedHeaders: ['Content-Type', 'Authorization'] // 按需添加必要请求头
}));

若需本地调试，可将本地前端域名加入origin数组：

origin: ["https://my-static-web-app.azurestaticapps.net", "http://localhost:3000"]

（2）实现后端代理逻辑

使用http-proxy-middleware库实现代理，让后端转发请求到Autodesk API并自动带上认证token：

const { createProxyMiddleware } = require('http-proxy-middleware');

// 双legged认证获取token的逻辑（参考示例代码实现）
async function getAccessToken() {
  // 此处编写调用Autodesk认证接口获取token的代码
}

// 配置代理路由
app.use('/api/proxy', async (req, res, next) => {
  const token = await getAccessToken();
  createProxyMiddleware({
    target: 'https://tandem.autodesk.com',
    changeOrigin: true,
    pathRewrite: { '^/api/proxy': '' }, // 移除前端请求中的代理前缀
    onProxyReq: (proxyReq) => {
      // 为代理请求添加认证头
      proxyReq.setHeader('Authorization', `Bearer ${token}`);
    }
  })(req, res, next);
});

3. 检查Azure门户的CORS设置 #

进入你的App Service资源 → 左侧菜单「API」下的「CORS」：

• 确认已添加前端域名https://my-static-web-app.azurestaticapps.net
• 生产环境不要勾选「允许所有来源」，避免安全风险

4. 验证请求流程 #

部署修改后的代码后，通过浏览器开发者工具「网络」面板检查请求URL，确认请求先发送到后端代理地址，再由后端转发到Autodesk API。

内容的提问来源于stack exchange，提问作者Jesús Ruiz