搭配 SharePoint 架構 使用開發 Proxy （SPFx） 解決方案

SharePoint 架構 （SPFx） 是擴充 SharePoint、Microsoft Teams、Microsoft Viva 和 Microsoft 365 的開發模型。 當您建置 SPFx 解決方案時，您可以使用 Dev Proxy 來攔截解決方案提出的 Web 要求，並查看其如何處理 API 錯誤。

攔截您的SPFx方案所提出的網頁請求

SharePoint 架構 解決方案是在網頁瀏覽器中執行的用戶端應用程式。 在開始 Dev Proxy 之前，您必須設定它來攔截由您的 SPFx 解決方案發出的請求。 您通常會想要攔截Microsoft Graph 和 SharePoint REST API 的要求。 如果您使用自訂 API，也希望攔截對它們的請求。 您可以在 Dev Proxy 組態檔中的 屬性中 urlsToWatch 定義要攔截的 URL。

{
  // [...] trimmed for brevity
  "urlsToWatch": [
    "https://graph.microsoft.com/*",
    "https://*.sharepoint.com/*"
    // other URLs to watch
  ]
}

提示

搭配 SharePoint 架構 Dev Proxy 解決方案使用 Dev Proxy 時，請使用範例解決方案庫中的 SPFx 預設值。 其中包含攔截 SPFx 解決方案提出的 Web 請求的常見配置，包括對 Microsoft Graph 和 SharePoint REST API 的請求。

當您在計算機上啟動 Dev Proxy 時，它會自動攔截 SPFx 解決方案提出的 Web 要求，並模擬已設定的回應。 您不需要將SPFx解決方案變更為使用Dev Proxy。

設定開發代理，不攔截 SharePoint 架構工作台請求。

建置SPFx解決方案時，您可以使用 SharePoint 架構 Workbench 來測試您的網頁元件。 SharePoint 架構 工作臺會在網頁瀏覽器中執行，並使用 SharePoint API 載入網頁元件。 根據預設，Dev Proxy 會攔截來自網頁瀏覽器的所有 Web 要求，包括 SharePoint 架構 workbench 提出的要求。 因此，它可能會阻止您測試網頁組件。

若要避免開發 Proxy 封鎖 SharePoint 架構 工作臺提出的要求，請將 Dev Proxy 設定為不會攔截對網頁元件 API 的要求。 在您的 Dev Proxy 配置檔中，藉由更新 urlsToWatch 屬性來排除 API。

{
  // [...] trimmed for brevity
  "urlsToWatch": [
    "!https://*.sharepoint.com/_api/web/GetClientSideComponents*"
    // other URLs to watch
  ]
}

提示

如果您使用範例解決方案集錦的SPFx預設值，它已經將此URL排除在開發代理程式的攔截範圍之外。