Zscaler隔离环境下使用Syncfusion Spreadsheet API遭遇CORS错误

问题原因 #

你的代码同时执行了两种文件加载逻辑：一是手动通过fetch获取文件后调用spreadsheet.open方法，二是给<SpreadsheetComponent>设置了openUrl属性。后者会触发组件自动向Syncfusion的生产API发起请求，但该API未配置允许http://localhost:5173的跨域头，因此被浏览器的CORS策略拦截。

解决方案 #

直接移除组件上的openUrl属性即可——你已经通过手动逻辑完成了文件加载和打开操作，不需要组件再自动发起跨域请求。

修正后的代码 #

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

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');
            const fileBlob: Blob = await response.blob();
            const file: File = new File([fileBlob], 'Sample.xlsx');
            const spreadsheet = spreadsheetRef.current;
            if (spreadsheet) {
                spreadsheet.open({ file });
            }
        };
        fetchData();
    }, []);

    // 移除openUrl属性，不再触发组件自动跨域请求
    return (
        <SpreadsheetComponent ref={spreadsheetRef} />
    );
}
export default App;

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

补充说明 #

如果后续需要通过接口加载文件，建议将openUrl指向你自己的后端服务，由后端处理文件读取或转发请求，避免前端直接跨域调用第三方API。

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