AEM Headless SPA部署

Last update: Mon Jun 16 2025 00:00:00 GMT+0000 (Coordinated Universal Time)

適用對象：
Experience Manager as a Cloud Service

主題：

建立對象：

中繼
開發人員

AEM Headless單頁應用程式(SPA)部署涉及使用React或Vue等架構建立的JavaScript型應用程式，這些架構可在AEM中以無頭方式使用內容並與內容互動。

部署SPA以無周邊方式與AEM互動，包括託管SPA並讓其可透過網頁瀏覽器存取。

託管SPA

SPA由原生網頁資源的集合所組成： HTML、CSS和JavaScript。這些資源會在組建程式（例如npm run build）期間產生，並部署至主機，以供一般使用者使用。

根據您組織的需求，有各種託管選項：

雲端提供者，例如 Azure 或 AWS。
在公司 資料中心 內部部署 主控
前端主控平台，例如 AWS Amplify、Azure應用程式服務、Netlify、Heroku、Vercel 等。

部署設定

託管與AEM Headless互動的SPA時，主要考量事項為透過AEM的網域（或主機）存取SPA，或是在其他網域上存取。這是因為SPA是在網頁瀏覽器中執行的網頁應用程式，所以受網頁瀏覽器安全性原則的約束。

共用網域

當使用者從相同網域存取兩者時，SPA和AEM會共用網域。例如：

AEM存取方式： https://wknd.site/
透過https://wknd.site/spa存取SPA

由於AEM和SPA都可從相同網域存取，網頁瀏覽器可讓SPA不需要CORS即可對AEM Headless端點執行XHR，並可共用HTTP Cookie (例如AEM的login-token Cookie)。

SPA和AEM流量在共用網域上的路由方式取決於您：具有多種來源的CDN、具有反向Proxy的HTTP伺服器、直接在AEM中託管SPA等等。

以下是SPA生產部署所需的部署設定(在與AEM相同的網域上託管)。

SPA連線至→

AEM 作者

AEM Publish

AEM預覽

Dispatcher篩選器

✘

✔

跨原始資源共用(CORS)

✘

AEM 主機

✘

不同網域

一般使用者從不同網域存取SPA和AEM時，這兩者會有不同的網域。例如：

AEM存取方式： https://wknd.site/
透過https://wknd-app.site/存取SPA

由於AEM和SPA可從不同的網域存取，網頁瀏覽器會強制實行安全性原則(例如跨原始資源共用(CORS))，並防止共用HTTP Cookie (例如AEM的login-token Cookie)。

以下是SPA生產部署所需的部署設定(託管於AEM以外的網域時)。

SPA連線至→

AEM 作者

AEM Publish

AEM預覽

Dispatcher篩選器

✘

✔

跨原始資源共用(CORS)

✔

AEM主機

✔

不同網域上的SPA部署範例

在此範例中，SPA會部署至Netlify網域(https://main--sparkly-marzipan-b20bf8.netlify.app/)，而SPA會使用來自AEM Publish網域(https://publish-p65804-e666805.adobeaemcloud.com)的AEM GraphQL API。以下熒幕擷取畫面會強調顯示CORS需求。

SPA是從Netlify網域提供，但會向其他網域上的AEM GraphQL API發出XHR呼叫。此跨網站要求必須在AEM上設定CORS，以允許來自Netlify網域的要求存取其內容。

從SPA和AEM主機提供的
檢查對AEM GraphQL API的XHR要求時，Access-Control-Allow-Origin已存在，向網頁瀏覽器表示AEM允許來自此Netlify網域的要求存取其內容。

如果AEM CORS遺失或不包含Netlify網域，網頁瀏覽器會導致XHR請求失敗，並報告CORS錯誤。