ReactJS集成OnlyOffice时出现Document security key格式错误求助

问题核心原因 #

该错误源于OnlyOffice文档服务器的JWT验证机制未匹配配置：默认Docker部署的OnlyOffice会启用JWT签名验证，若前端请求未携带有效签名、或服务器与前端的JWT密钥不统一，就会触发该提示。

解决方案 #

1. 临时关闭JWT验证（测试环境快速验证）

若仅做本地测试，可直接关闭OnlyOffice的JWT验证，修改Docker启动命令：

docker run -i -t -d -p 80:80 --restart=always onlyoffice/documentserver \
  -e JWT_ENABLED=false

重启容器后刷新React页面即可。

2. 配置JWT验证（生产/正式测试环境）

若需保留安全验证，需确保前端与服务器使用相同密钥：

• 步骤1：设置Docker容器的JWT密钥

  docker run -i -t -d -p 80:80 --restart=always onlyoffice/documentserver \
    -e JWT_ENABLED=true \
    -e JWT_SECRET=your-custom-secret-key
  

• 步骤2：前端代码添加有效JWT Token
  Token需由后端生成（避免前端暴露密钥），修改后的组件示例：

  import React from 'react';
  import { DocumentEditor } from "@onlyoffice/document-editor-react";
  
  const onDocumentReady = () => console.log("Document is loaded");
  
  const onLoadComponentError = (errorCode, errorDescription) => {
      switch(errorCode) {
          case -1: case -2: case -3:
              console.error(errorDescription);
              break;
      }
  };
  
  // 文档URL必须是OnlyOffice服务器可访问的地址，用主机IP替代localhost
  const documentUrl = "http://192.168.1.100:3000/sample4.docx";
  // 从后端获取预生成的JWT Token
  const editorToken = "your-backend-generated-token";
  
  const OnlyOffice = () => {
      return (
          <DocumentEditor
              id="docxEditor"
              documentServerUrl="http://localhost"
              token={editorToken} // 新增JWT Token配置
              config={{
                  "document": {
                      "fileType": "docx",
                      "title": "Example Document Title.docx",
                      "url": documentUrl
                  },
                  "documentType": "word",
                  "editorConfig": {
                      // Callback地址必须是OnlyOffice可访问的接口，禁止用example.com
                      "callbackUrl": "http://192.168.1.100:3000/api/onlyoffice-callback"
                  }
              }}
              events_onDocumentReady={onDocumentReady}
              onLoadComponentError={onLoadComponentError}
          />
      );
  }
  
  export default OnlyOffice
  

3. 修正其他关键配置细节

• documentServerUrl：若Docker映射的不是80端口，需补充端口（如http://localhost:8080）
• callbackUrl：必须是OnlyOffice服务器能访问到的公开接口，本地测试可使用ngrok暴露服务，或用主机IP替代localhost
• document.url：文档地址需确保OnlyOffice容器能访问，避免用localhost，改用局域网IP或公开地址

内容的提问来源于stack exchange，提问作者Harshil Sharma