"The document security token is not correctly formed. Please contact your Document Server administrator" OnlyOffice

[viscous-coder]

I am trying to open my file in onlyOffice I tried so much but i got errors. I don't know how to solve them

this is my react file

import React, { useState, useEffect } from “react”;
import { DocumentEditor } from “[@onlyoffice](https://forum.onlyoffice.com/u/onlyoffice)/document-editor-react”;

const OnlyOffc = (props) => {
const [docUrl, setDocUrl] = useState(“”);
let token = sessionStorage.getItem(“jwt_token”);
let username = localStorage.getItem(“username”);
let deptRole = sessionStorage.getItem(“role”);
let sessionId = sessionStorage.getItem(“sessionId”);
console.log(props.url, token, “this”);
let correctUrl = props?.url?.replaceAll(“xxxyyyzzz”, “/”);

const onDocumentReady = () => {
console.log(“Document is loaded”);
setLoading(false);
};

const onLoadComponentError = function (errorCode, errorDescription) {
switch (errorCode) {
case -1: // Unknown error loading component
console.log(errorDescription);
break;

case -2: // Error load DocsAPI from http://documentserver/
console.log(errorDescription);
break;

case -3: // DocsAPI is not defined
console.log(errorDescription);
break;
}
};

useEffect(() => {
fetch(For_Getting_the_file_url, { //to get the file url
headers: {
“Content-Type”: “application/json”,
Authorization: "Bearer " + token,
username: username,
deptRole: deptRole,
sessionId: sessionId,
},
})
.then(async (res) => {
console.log(res, “res”);
let data = await res.blob();
// console.log(data);

let file = new File([data], "test.docx");
console.log("file", file.name);

setDocUrl(URL.createObjectURL(file)); // set object URL of file as docUrl
})
.catch((error) => {
console.log(error);
});
}, [correctUrl, token, username, deptRole, sessionId]);

console.log(“docurl”, docUrl);

return (

{docUrl && (
<DocumentEditor
id=“docxEditor”
documentServerUrl=“DOCKER_URL” //getting from docker
config={{
document: {
key: props.fileId,  //key should be unqiue for every file so i pass file id
fileType: “docx”,
title: “farmer.docx”,
url: docUrl,
},
documentType: “word”,
type: “desktop”,
height: “800px”,
width: “100%”,
}}
events_onDocumentReady={onDocumentReady}
onLoadComponentError={onLoadComponentError}
/>
)}

);
};
export default OnlyOffc;

// /etc/onlyoffice/documentserver/local.json

{
“services”: {
“CoAuthoring”: {
“sql”: {
…data
},
“token”: {
“enable”: {
“request”: {
“inbox”: true,
“outbox”: true,
},
“browser”: true
},
“inbox”: {
“header”: “Authorization”,
“inBody”: false
},
“outbox”: {
“header”: “Authorization”,
“inBody”: false
}
},
“secret”: {
“inbox”: {
“string”: “SECRET_KEY”
},
“outbox”: {
“string”: “SECRET_KEY”
},
“session”: {
“string”: “SECRET_KEY”
}
}
}
},
“rabbitmq”: {
“url”: “Some_URL”
},
“wopi”: {
“enable”: false,
“privateKey”: “SOMEVALUES”,
“privateKeyOld”: “SOMEVALUES”,
“publicKey”: “SOMEVALUES”,
“publicKeyOld”: “SOMEVALUES”,
“modulus”: “SOMEVALUES”,
“modulusOld”: “SOMEVALUES”,
“exponent”: 12333,
“exponentOld”: 11111
},
“queue”: {
“type”: “abc”
},
“storage”: {
“fs”: {
“secretString”: “MY_SECRET_KEY”
}
}
}

//compose.yml

environment:

JWT_ENABLED=true JWT_SECRET=SECRET_KEY JWT_HEADER=Authorization how to resolve that error

if i do JWT_ENABLED=false then i get the error "Download Failed" in the above code i want to open my docx file. sorry for not explained properly @igwyd , @Tragen and @thomass4t would you please check it.

[viscous-coder]

@askonev , @igwyd I resolve the token error, it is coming because of the token I generated is not match as the requirement now I resolve that error. But i get the "Download Failed" error my file url is "http://localhost:3000/ca1d97d6-0d66-47bc-9989-b85c635f74b0" compose.yml JWT_ENABLED=true JWT_SECRET=SECRET_KEY JWT_HEADER=AuthorizationJWT

[viscous-coder]

@askonev , @igwyd I resolved the "Download Failed" error. Now my file is open but something is wrong the content cannot appear and some javascript error "JavaScript isn't enabled in your browser, so this file can't be opened. Enable and reload."

Please look at this problem and help me to find the solution

[viscous-coder]

@askonev, @ivanovnikolay, @igwyd Is there any update?

[askonev]

@viscous-coder

1. How did you deploy docs server? If through docker, the use of localhost is prohibited by default for urls by security policy
2. Judging by the screenshots, the document looks like an html document converted to docx and opened in the editor. Double-check the validity of the url before the document

[viscous-coder]

@askonev thanks for replying, when i pass static url for the testing purpose "https://docs.google.com/document/d/1AJWqco_z8Hp6YqYcePZzds1ipf6SiwM8/edit?usp=drive_link&ouid=111573498825798762108&rtpof=true&sd=true" and another is "https://example.com/url-to-example-document.docx" but still i get the same. it still give the same things. Even i check my browser site setting also all working fine. I don't know where that issue is generated this is my latest logs

Please look into it, its an urgent work. Hoping for fast reply @askonev , @igwyd

[askonev]

@viscous-coder The url examples you provided before the documents are not direct links to the documents

In the case of google docs, this is the url to the editor, so the html structure opens In the second case, the docx file will also not be received

As a solution, it is possible to use containerized nginx to distribute static files https://nginx.org/en/docs/beginners_guide.html#:~:text=considered%20a%20comment.-,Serving%20Static%20Content,-An%20important%20web

as an example, I will give the configuration of docker compose with allowed CORS policies

services:
  web:
    image: nginx:latest
    volumes:
    # data shared
      - type: bind
        source: ${PWD}/html
        target: /usr/share/nginx/html
    # nginx CORS
      - type: bind
        source: ${PWD}/nginx_config/default.conf
        target: /etc/nginx/conf.d/default.conf
        read_only: true
    ports:
      - "9090:80"
    restart: on-failure
    environment:
      - NGINX_PORT=80

https://enable-cors.org/server_nginx.html