如何在TypeScript中實現跨域通信

在 TypeScript 中實現跨域通信可以通過以下幾種方式：

1. 使用 JSONP：JSONP 是一種跨域通信的方式，通過動態創建 script 標簽來請求跨域資源并使用回調函數來處理返回的數據。在 TypeScript 中可以使用 JSONP 進行跨域通信。

function jsonp(url: string, callbackName: string, callback: (data: any) => void) {
    const script = document.createElement('script');
    script.src = `${url}?callback=${callbackName}`;
    document.body.appendChild(script);

    window[callbackName] = (data: any) => {
        callback(data);
        document.body.removeChild(script);
    };
}

2. 使用 CORS：CORS 是一種現代瀏覽器提供的跨域通信機制，允許服務器指定哪些域名可以訪問資源。在 TypeScript 中可以使用 XMLHttpRequest 或 fetch API 來進行跨域通信。

fetch('https://example.com/api/data', {
    method: 'GET',
    mode: 'cors', // 允許跨域請求
    headers: {
        'Content-Type': 'application/json'
    }
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));

3. 使用代理服務器：在開發環境中可以使用代理服務器來解決跨域問題，在生產環境中也可以通過代理服務器來轉發請求。在 TypeScript 中可以通過配置代理服務器來實現跨域通信。

const proxyUrl = 'https://cors-anywhere.herokuapp.com/';
const apiUrl = 'https://example.com/api/data';

fetch(proxyUrl + apiUrl)
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));

這些是 TypeScript 中實現跨域通信的幾種方式，開發者可以根據具體需求選擇合適的方式來進行跨域通信。