Tableau Enture Report с просьбой входа в систему вместо непосредственной загрузки отчета в браузере Safari ⇐ Javascript

[Anonymous]

Я работаю над проектом в ReactJS, в который я встраивал отчеты Tableau. Я использовал подключенные приложения Direct Trust с JWT, поэтому отчеты не требуют SIGNIN перед загрузкой, и они загружаются без сигнала в Chrome и Firefox, однако они требуют знаки в облаке Tableau в браузере Safari. < /P>
Это ошибка, которую я получаю в консольном. (tableau.embedding.3.12.0-pre.25.min.js.map, строка 0)

[ошибка] Не удалось загрузить ресурс: сервер ответил состоянием 401 () (просмотр, строка 0) < /p>
import TableauViz from "@/components/TableauViz/TableauViz";
import { useEffect, useState } from "react";
import { useSelector } from "react-redux";

const Report = () => {
const [device, setDevice] = useState("desktop");

const { selectedReport = null, reportToken = "" } = useSelector(
(state) => state.reports
);

const { isLargeScreenSidebarOpen } = useSelector((state) => state.ui);

useEffect(() => {
const handleResize = () => {
if (window.innerWidth < 768) {
setDevice("mobile");
} else {
setDevice("desktop");
}
};

// Initial check
handleResize();

// Add event listener for window resize
window.addEventListener("resize", handleResize);

// Clean up the event listener on component unmount
return () => {
window.removeEventListener("resize", handleResize);
};
}, []);

if (!selectedReport) return ;

const options = {
toolbar: "bottom",
"hide-tabs": true,
device,
"hide-edit-button": true,
width: "100%",
};

return (

);
};

export default Report;
< /code>
import React, { useEffect, useRef, useState } from "react";
import { TableauEventType } from "https://public.tableau.com/javascripts/ ... est.min.js";
import { ErrorMessage } from "@/components/ErrorMessage/ErrorMessage";

const TableauViz = ({ src, options, token }) => {
const vizContainer = useRef(null);
const [error, setError] = useState("");

function handleError(err) {
try {
if (err.detail) {
const details = JSON.parse(err.detail.message);
console.error(details);
if (details.statusCode === 401) {
setError("You are not authorized to view this report.");
emptyVizContainer();
} else {
setError("Something went wrong.");
emptyVizContainer();
}
}
} catch (error) {
console.error("handleError", error);
setError("Something went wrong.");
emptyVizContainer();
}
}

function emptyVizContainer() {
if (vizContainer.current) {
vizContainer.current.innerHTML = "";
}
}

useEffect(() => {
// Initialize the Tableau Viz web component
const vizElement = document.createElement("tableau-viz");
vizElement.id = "tableauViz";
vizElement.src = src;
vizElement.token = token;

// Add options as attributes
for (const [key, value] of Object.entries(options)) {
vizElement.setAttribute(key, value);
}

// Append the viz element to the container
if (vizContainer.current) {
vizContainer.current.innerHTML = "";
vizContainer.current.appendChild(vizElement);
}

// Add event listeners
vizElement.addEventListener(TableauEventType.VizLoadError, handleError);

// Cleanup event listeners on unmount
return () => {
vizElement.removeEventListener(
TableauEventType.VizLoadError,
handleError
);
};
}, [src, options]);

if (error)
return (



);

return ;
};

export default TableauViz;
< /code>
In the official documentation they say it is because safari blocks third party cookies the report is asking for signin but they don't provide a solution. I tried block third party cookies in chrome but still the report were loading fine.

Подробнее здесь: https://stackoverflow.com/questions/795 ... -report-in