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

Question

我有以下代码：

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

Autodesk.Viewing.Initializer(initOpts, handleViewerInit);

并使用以下内容更新查看器 div（React-based，这部分使用加载器等加载预期的 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 hooks 等，但无论如何，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"，因为我尚未遵循最佳安全实践，但它是 EC2 public URL格式 http://ec2-<public-ip>.eu-west-2.compute.amazonaws.com:<port>

这是相同的URL 我在 Forge 应用程序控制面板上配置了回调和网站 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 and 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,
}

所以观看者在观看之前肯定有令牌，它可用于创建存储桶、上传 objects 等

根据请求，pre-flight OPTIONS

中的 headers

请求headers

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

回复headers

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”仅在您使用三足身份验证时相关，但在这种情况下，您似乎只使用了两足身份验证，对吗？

现在，自定义域就可以了，查看者在与 Forge API 通信时应该传递它。例如，当你转到 https://forge-basic-app.herokuapp.com，打开开发工具中的 Network 选项卡，并过滤其中包含“manifest”的所有请求时，你应该看到两个请求：一个 OPTIONS 请求（CORS“pre-flight" 检查）和派生清单的实际 GET 请求。这两者都应在其响应 headers 中包含 Access-Control-Allow-Origin: https://forge-basic-app.herokuapp.com，表明 Heroku 上的应用程序 允许请求这些资源。

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

Answer 2

在 re-reading 请求 header 之后，我注意到授权 header 是 'Bearer [object Object]'。我发布了整个凭据 object，而不是访问令牌属性。问题已解决！

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

Autodesk Forge Viewer: CORS blocked, Same Origin Policy disallows reading the remote resource

autodesk-forge

autodesk-viewer

autodesk-model-derivative