React.js集成ONLYOFFICE时加载DocsAPI出现404错误求助

核心问题定位 #

你遇到的Error load DocsAPI错误，本质是前端请求http://confidential.com/example/web-apps/apps/api/documents/api.js返回404，说明该路径下不存在对应的静态资源文件，以下是具体排查和修复方向：

排查步骤与解决方案 #

1. 确认Document Server根路径是否正确 #

ONLYOFFICE Document Server的api.js默认位于/web-apps/apps/api/documents/路径下，因此documentServerUrl必须指向Document Server的根地址，而非子路径：

• 直接在浏览器访问http://confidential.com/web-apps/apps/api/documents/api.js，若能正常加载，说明你之前的documentServerUrl多写了/example/，修正代码：

  <DocumentEditor
    id="docxEditor"
    documentServerUrl="http://confidential.com/" // 改为Document Server根地址
    // 其他配置保持不变
  />
  

• 若根路径下的api.js也返回404，需确认Document Server实际部署的子路径，比如部署在/docs/下，就写documentServerUrl="http://confidential.com/docs/"。

2. 检查反向代理/部署配置 #

如果通过反向代理（如Nginx）映射Document Server，需确保代理规则正确：

• 示例Nginx配置片段，将/example/路径请求转发到Document Server根目录：

  location /example/ {
      proxy_pass http://your-document-server-ip/;
      proxy_set_header Host $host;
      proxy_set_header X-Real-IP $remote_addr;
  }
  

• 同时确认Document Server服务器上的web-apps文件夹存在，且文件权限为可读（一般给运行服务的用户如www-data分配权限）。

3. 排查权限与网络限制 #

• 检查服务器防火墙/安全组，确认允许前端所在IP访问Document Server的静态资源路径。
• 查看Document Server日志（通常在/var/log/onlyoffice/documentserver/目录），是否存在访问被拒绝的记录。

4. 版本兼容性检查 #

确保@onlyoffice/document-editor-react组件版本与部署的Document Server版本匹配，跨大版本可能存在路径或API差异：

• 比如组件用v7.x，服务器也对应v7.x；组件v8.x对应服务器v8.x。

额外代码注意点 #

你的代码中document.key使用my_only_office_jwt_secret是错误的：

• key是文档的唯一标识，应该用文件哈希值、UUID或其他唯一字符串，用于区分不同文档。
• JWT密钥是请求验证用的，应在Document Server后台配置，或前端通过token参数传递（若开启JWT验证），切勿将密钥暴露在前端代码中。

内容的提问来源于stack exchange，提问作者Yogesh Dhengale