Autodesk Forge 查看器：CORS 被阻止，同源策略不允许读取远程资源

Question

我有以下代码：

const initOpts = {
  env: 'AutodeskProduction',
  // getAccessToken: onTokenRequest,
  accessToken: forgeAuthToken,
  api: 'derivativeV2',
};

Autodesk.Viewing.Initializer(initOpts, handleViewerInit);

并使用以下内容更新查看器 div（基于 React，这部分使用加载器等加载预期的 div）：

const viewer = new Autodesk.Viewing.Private.GuiViewer3D(viewerRef.current)
const err = viewer.start();

const documentId = `urn:dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6YnVja2V0LTk5OC8xMzQ0NDY0NjEyLmR3Zw`;
console.log('documentId', documentId);

Autodesk.Viewing.Document.load(documentId, handleDocumentLoadSuccess, handleDocumentLoadError);

我已经稍微简化了代码，因为它使用了 React 钩子等，但无论如何，Autodesk.Viewing.Document.load 方法调用错误回调，它报告 401 和以下 developerMessage: "Access token provided is invalid or expired."

---

在生成访问令牌时，我使用了以下方法：

forgeAuthToken 从后端路由接收，生成如下：

const forgeRefreshToken = true;
const {
  FORGE_CLIENT_ID = "...",
  FORGE_CLIENT_SECRET = "...",
} = process.env;
const forgeScopes = [
  'data:read',
  'data:write',
  'bucket:create',
  'bucket:read',
  'bucket:update',
  'bucket:delete',
  'viewables:read',
];
const tokenAuth = new ForgeApis.AuthClientTwoLegged(
  FORGE_CLIENT_ID,
  FORGE_CLIENT_SECRET,
  forgeScopes,
  forgeRefreshToken,
);
const token = await tokenAuth.authenticate();

形式如下：

{ 
  access_token: "<token>",
  token_type: "Bearer",
  expires_in: 3599,
  expires_at: Date Mon Sep 07 2020 11:59:42 GMT+0100 (British Summer Time)
}

我尝试使用越来越多的范围来确认这不是问题，因为我知道它需要 viewables:read 范围，但不确定其他范围是否会影响它。

请注意，我已将我的开发 URL 替换为 "$DEVELOPMENT_URL"，因为我尚未遵循最佳安全实践，但它是格式为 http://ec2-<public-ip>.eu-west-2.compute.amazonaws.com:<port> 的 EC2 公共 URL

这是我在 Forge 应用控制面板上配置为回调和网站 URL 的同一个 URL。

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at 
https://developer.api.autodesk.com/derivativeservice/v2/manifest/adsk.objects%3Aos.object%3Aasdfqwerff%2FLON-BH-NBH-B1-1020.dwg?domain="$DEVELOPMENT_URL". 
(Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

---

我做错了什么？我关注了this 和this，现在我对失败的原因一无所知

---

更多信息，我已经记录了Autodesk.Viewing.token（形式为eyJhb...9SkIs），并解码了提供以下内容的JWT访问令牌，只是为了检查这不是我的方式的一些实例问题实现了查看者的令牌：

{
  "scope":[
    "data:read",
    "data:write",
    "bucket:create",
    "bucket:read",
    "bucket:update",
    "bucket:delete",
    "viewables:read"
  ],
  "client_id":"<my-client-id>",
  "aud":"https://autodesk.com/aud/jwtexp60",
  "jti":"DJUX42Gdl6mYhbCF7d2iZUjvdmYuzZR5wQ2j2BdtjNhm7eAx4Ai26pBKrNFuTScd",
  "exp":1599479159,
}

所以查看者在查看之前肯定有令牌，用于创建桶、上传对象等。

---

每个请求，来自飞行前 OPTIONS 的标头

请求标头

OPTIONS /derivativeservice/v2/manifest/dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6ZGFkcy8xMzQ0NDY0NjEyLmR3Zw?domain=http%3A%2F%2Fec2-<public-ip>.eu-west-2.compute.amazonaws.com%3A3000 HTTP/1.1
Host: developer.api.autodesk.com
User-Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:79.0) Gecko/20100101 Firefox/79.0
Accept: */*
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate, br
Access-Control-Request-Method: GET
Access-Control-Request-Headers: authorization
Referer: http://ec2-<public-ip>.eu-west-2.compute.amazonaws.com:3000/
Origin: http://ec2-<public-ip>.eu-west-2.compute.amazonaws.com:3000
Connection: keep-alive

响应标头

HTTP/1.1 200 OK
Accept: */*
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.5
Access-Control-Allow-Credentials: true
Access-Control-Allow-Headers: x-ads-acm-namespace,Accept-Encoding,Content-Encoding,If-Match,x-ads-ul-ctx-oxygen-id,Access-Control-Allow-Origin,If-Modified-Since,Accept,x-ads-ul-ctx-caller-span-id,Expect,x-ads-ul-ctx-source,Content-Range,If-None-Match,x-ads-ul-ctx-workflow-id,x-csrf-token,Content-Length,x-ads-test,Access-Control-Allow-Credentials,Content-Type,x-ads-ul-ctx-client-id,Authorization,x-ads-acm-check-groups,x-ads-acm-groups,x-requested-with,x-ads-acm-scopes,x-ads-ul-ctx-head-span-id,x-ads-ul-ctx-scope,Session-Id,Range,x-ads-force,x-ads-ds-client
Access-Control-Allow-Methods: POST,GET,OPTIONS,HEAD,PUT,DELETE,PATCH
Access-Control-Allow-Origin: http://ec2-<public-ip>.eu-west-2.compute.amazonaws.com:3000
Access-Control-Max-Age: 86400
Access-Control-Request-Headers: authorization
Access-Control-Request-Method: GET
Content-Type: text/html
Date: Mon, 07 Sep 2020 12:37:59 GMT
Origin: http://ec2-<public-ip>.eu-west-2.compute.amazonaws.com:3000
Referer: http://ec2-<public-ip>.eu-west-2.compute.amazonaws.com:3000/
Strict-Transport-Security: max-age=31536000; includeSubDomains
User-Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:79.0) Gecko/20100101 Firefox/79.0
Vary: Origin
X-Forwarded-For: 188.214.12.163
X-Forwarded-Port: 443
X-Forwarded-Proto: https
Content-Length: 0
Connection: keep-alive

Answer 1

几点说明：

• 如果您只想在 Forge Viewer 中预览模型，viewables:read 范围就足够了
• 我认为您在初始化查看器时不必指定env 和api 属性
• “回调 URL”仅在您使用 3-legged 身份验证时相关，但在这种情况下，您似乎只使用 2-legged 身份验证，对吧？

现在，自定义域很好，查看器在与 Forge API 通信时应该传递它。例如，当您转到https://forge-basic-app.herokuapp.com 时，打开开发工具中的 Network 选项卡，并过滤所有包含“manifest”的请求，您应该会看到两个请求：一个 OPTIONS 请求（CORS“飞行前”检查) 以及派生清单的实际 GET 请求。这两个都应该在它们的响应头中包含Access-Control-Allow-Origin: https://forge-basic-app.herokuapp.com，表明Heroku上的应用程序被允许请求这些资源。

尝试在 AWS EC2 上的应用程序中查看这些请求，看看是否有问题。也许域查询参数不正确？

Answer 2

重新阅读请求标头后，我注意到授权标头是“Bearer [object Object]”。我发布了整个凭据对象，而不是访问令牌属性。问题解决了！