Autodesk Forge Viewer：已阻止CORS，“相同来源策略”不允许读取远程资源

问题描述

我有以下代码：

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

Autodesk.Viewing.Initializer(initOpts,handleViewerInit);

并使用以下内容更新查看器div（基于反应，此部分将使用加载程序加载预期的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方法都会调用错误回调，它会在错误报告中显示以下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公共URL，格式为http://ec2-<public-ip>.eu-west-2.compute.amazonaws.com:<port>

这是我在Forge应用程序控制面板上配置为回调URL和网站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 /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,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范围就足够了
• 我认为您在初始化查看器时不必指定env和api属性
• “回调URL”仅在您使用三足身份验证时才相关，但是在这种情况下，您好像只在使用两足身份验证，对吗？

现在，自定义域就可以了，查看器在与Forge API通信时应该将其传递。例如，当您转到https://forge-basic-app.herokuapp.com时，在开发工具中打开“网络”标签，并过滤其中包含“清单”的所有请求，您应该会看到两个请求：OPTIONS请求（CORS“飞行前” （检查），以及派生清单的实际GET请求。两者都应在其响应标头中包含Access-Control-Allow-Origin: https://forge-basic-app.herokuapp.com，表示允许Heroku 上的应用程序请求这些资源。

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

,

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