Observing CORS error from Syncfusion Spreadsheet API when behind Zscaler Isolation

Question

The code is expected run without CORS error, however the browser throws error in rendering the spreadsheet component from Syncfusion API

**Error: ** localhost/:1 Access to fetch at [https://services.syncfusion.com/react/production/api/spreadsheet/open'] from origin ' http://localhost:5173' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';
import React from 'react';


function App() {
    const spreadsheetRef = React.useRef<SpreadsheetComponent>(null);
    React.useEffect(() => {
        const fetchData = async (): Promise<void> => {
            const response: Response = await fetch('https://cdn.syncfusion.com/scripts/spreadsheet/Sample.xlsx'); // fetch the remote url

            const fileBlob: Blob = await response.blob(); // convert the excel file to blob
            const file: File = new File([fileBlob], 'Sample.xlsx'); //convert the blob into file
            const spreadsheet = spreadsheetRef.current;
            if (spreadsheet) {
                spreadsheet.open({ file }); // open the file into Spreadsheet
            }
        };
        fetchData();
    }, []);

    return (
            <SpreadsheetComponent ref={spreadsheetRef} openUrl='https://services.syncfusion.com/react/production/api/spreadsheet/open' />

    );
}
export default App;

const root = createRoot(document.getElementById('root')!);
root.render(<App />);

Answer 1

The issue with Zscaler proxy, when the request intercepted by ZPA, the CORS response header has been removed for the Syncfusion API, eventually blocked by browser.

Solution: The Syncfusion API endpoint should be whitelisted in Zscaler Policy to resolve the issue.