React应用中Autodesk Forge模型缩略图获取问题求助

核心原因 #

浏览器的跨域资源共享（CORS）策略会限制前端脚本访问跨域响应中的Set-Cookie头，而Postman作为桌面工具不受浏览器同源策略约束，所以能正常看到这些Cookie。

具体解决方案 #

• 确认API端CORS配置
  Autodesk的API需要返回Access-Control-Allow-Credentials: true，同时Access-Control-Allow-Origin要设置为你的前端域名（不能用通配符*，否则Allow-Credentials会失效）。这部分一般API默认支持，可通过请求头的Origin字段验证是否匹配。

• Axios开启跨域凭证携带
  在Axios请求配置中必须添加withCredentials: true，否则浏览器会忽略服务器返回的Set-Cookie：

  import axios from 'axios';
  
  const fetchSignedCookie = async () => {
    try {
      const response = await axios.get(
        'https://developer.api.autodesk.com/modelderivative/v2/designdata/<MODELURN>/manifest/<IMAGE_DERIVATIVE_URN>/signedcookie',
        {
          headers: {
            'Authorization': 'Bearer YOUR_ACCESS_TOKEN' // 替换为你的有效访问令牌
          },
          withCredentials: true // 关键配置，开启跨域凭证
        }
      );
      // 此时可从响应头中获取Set-Cookie
      console.log('获取到的Cookie:', response.headers['set-cookie']);
      return response;
    } catch (error) {
      console.error('请求失败:', error);
    }
  };
  

• 检查Cookie的SameSite属性
  若服务器返回的Cookie设置了SameSite=Strict或SameSite=Lax，跨域场景下浏览器不会将其暴露给前端脚本。需确认Autodesk API返回的Cookie是否带有SameSite=None; Secure属性（SameSite=None必须搭配Secure，且前端需在HTTPS环境下运行）。

• 本地开发环境适配
  若本地开发用HTTP协议，而API是HTTPS，浏览器会拒绝设置带Secure属性的Cookie。可选择：

  • 本地开发启用HTTPS（比如配置webpack-dev-server的https选项）
  • 临时调整浏览器的跨域Cookie限制（仅用于开发测试，生产环境禁用）

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