Reactjs React中Forge查看器的最小实现

我试图以这个答案为例，用React实现一个查看器的最小实现

到目前为止，我能够显示带有harcoded令牌和urn的模型，但是当我想要以编程方式获取令牌时，我会遇到以下错误：

Access to XMLHttpRequest at 'https://developer.api.autodesk.com/derivativeservice/v2/manifest/dXJuOmFkc2sud2lwcHJvZDpmcy5maWxlOnZmLlR5MUVRR2NYUXhxeklIdlBFM1g2aUE_dmVyc2lvbj0xNw?domain=http%3A%2F%2Flocalhost%3A3000' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

onDocumentLoadFailure() - errorCode:7

GET https://developer.api.autodesk.com/derivativeservice/v2/manifest/dXJuOmFkc2sud2lwcHJvZDpmcy5maWxlOnZmLlR5MUVRR2NYUXhxeklIdlBFM1g2aUE_dmVyc2lvbj0xNw?domain=http%3A%2F%2Flocalhost%3A3000 net::ERR_FAILED

从我的代码中，我只访问服务器中的这个端点

api/forge/oauth

，我不直接使用

https://developer.api.autodesk.com/derivativeservice/v2

就像错误显示一样

为了防止我使用的唯一端点出现CORS错误，我已经在服务器中设置了头，如下所示：

服务器代码

// Set up Express web server
var app = express();
app.use(bodyParser.json()) // aplication/json
app.use((req, res, next) => {
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, PATCH, DELETE');
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');
  next();
});
app.use(express.static(__dirname + '/www'));

// This is for web server to start listening to port 8080
app.set('port', 8080);
var server = app.listen(app.get('port'), function () {
    console.log('Server listening on port ' + server.address().port);
});

客户端代码

// Set up Express web server
var app = express();
app.use(bodyParser.json()) // aplication/json
app.use((req, res, next) => {
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, PATCH, DELETE');
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');
  next();
});
app.use(express.static(__dirname + '/www'));

// This is for web server to start listening to port 8080
app.set('port', 8080);
var server = app.listen(app.get('port'), function () {
    console.log('Server listening on port ' + server.address().port);
});

公共HTML

<link rel="stylesheet" href="https://developer.api.autodesk.com/modelderivative/v2/viewers/2.*/style.min.css?v=v7.*" type="text/css">
<!-- The Viewer JS -->
<script src="https://developer.api.autodesk.com/modelderivative/v2/viewers/2.*/three.min.js"></script>
<script src="https://developer.api.autodesk.com/modelderivative/v2/viewers/2.*/viewer3D.min.js"></script>

---

我的错误可能是什么？

我认为您不需要设置标题，从Autodesk方面来说，这是允许的。。。你能在匿名模式下快速尝试吗？（或清除本地缓存）我按照您的建议尝试匿名并清除缓存，但得到了相同的错误。再次查看您的代码。。。你使用的版本是什么？v7？您的代码似乎与我所期望的不同，请参阅这个普通示例：为了验证我使用的

https://developer.api.autodesk.com/authentication/v1/authenticate

来自文档，但我没有使用modelDerivative，因为我已经有了已翻译的模型。您提到的错误出现在查看器上，不是在身份验证上，对吗？我上面提到的链接是针对查看器v7I的，我认为您不需要设置标题，从Autodesk方面来说，这是允许的。。。你能在匿名模式下快速尝试吗？（或清除本地缓存）我按照您的建议尝试匿名并清除缓存，但得到了相同的错误。再次查看您的代码。。。你使用的版本是什么？v7？您的代码似乎与我所期望的不同，请参阅这个普通示例：为了验证我使用的

https://developer.api.autodesk.com/authentication/v1/authenticate

来自文档，但我没有使用modelDerivative，因为我已经有了已翻译的模型。您提到的错误出现在查看器上，不是在身份验证上，对吗？我上面提到的链接是针对查看器v7的

import React, { useEffect} from 'react'
import {initializeViewer} from './viewer-helper'

const Viewer = () => {
  const urn = 'dXJuOmFkc2sud2lwcHJvZDpmcy5maWxlOnZmLlR5MUVRR2NYUXhxeklIdlBFM1g2aUE_dmVyc2lvbj0xNw'
  useEffect(() => {
    initializeViewer(urn)
  }, [])

  return (
      <div>
          <div id='viewerContainer'></div>
      </div>
  )
}

export default Viewer

import axios from "axios";

const Autodesk = window.Autodesk;

const url_base = 'http://localhost:8080/'
const getToken = async () =>{
  const {data} = await axios.get(url_base + 'api/forge/oauth')
  return data
}

export const initializeViewer = async (urn) => {

  function onDocumentLoadSuccess(doc) {
    console.log('document loaded')
    // A document contains references to 3D and 2D viewables.
    var viewables = Autodesk.Viewing.Document.getSubItemsWithProperties(doc.getRootItem(), {'type':'geometry'}, true);
    if (viewables.length === 0) {
        console.error('Document contains no viewables.');
        return;
    }

    // Choose any of the avialble viewables
    var initialViewable = viewables[0];
    var svfUrl = doc.getViewablePath(initialViewable);
    var modelOptions = {
        sharedPropertyDbPath: doc.getPropertyDbPath()
    };

    var viewerDiv = document.getElementById('viewerContainer');
    viewer = new Autodesk.Viewing.Private.GuiViewer3D(viewerDiv);
    viewer.start(svfUrl, modelOptions, onLoadModelSuccess, onLoadModelError);
  }

  /**
   * Autodesk.Viewing.Document.load() failuire callback.
   */
  function onDocumentLoadFailure(viewerErrorCode) {
    console.error('onDocumentLoadFailure() - errorCode:' + viewerErrorCode);
  }

  /**
   * viewer.loadModel() success callback.
   * Invoked after the model's SVF has been initially loaded.
   * It may trigger before any geometry has been downloaded and displayed on-screen.
   */
  function onLoadModelSuccess(model) {
    console.log('onLoadModelSuccess()!');
    console.log('Validate model loaded: ' + (viewer.model === model));
    console.log(model);
  }

  /**
   * viewer.loadModel() failure callback.
   * Invoked when there's an error fetching the SVF file.
   */
  function onLoadModelError(viewerErrorCode) {
    console.error('onLoadModelError() - errorCode:' + viewerErrorCode);
  }

  const token = await getToken()

  const viewerOptions = {
    env: 'AutodeskProduction',
    accessToken: token,
    api: 'derivativeV2',
  };
  var viewerContainer = document.getElementById('viewerContainer')
  var viewer = new Autodesk.Viewing.Private.GuiViewer3D(viewerContainer, {})

  Autodesk.Viewing.Initializer(viewerOptions, () => {
    Autodesk.Viewing.Document.load(`urn:${urn}`, onDocumentLoadSuccess, onDocumentLoadFailure);
  })
}