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

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

我有以下代码:

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

几个注意事项:

  • 如果您只想在 Forge Viewer 中预览模型,viewables:read 范围就足够了
  • 我认为您在初始化查看器时不必指定 envapi 属性
  • “回调 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 上的应用程序中的这些请求,看看那里是否有问题。也许域查询参数不正确?

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