以React撰寫的範例單頁應用程式,會使用AEM Headless GraphQL API的內容。
檢視範例AEM Headless單頁應用程式(SPA)部署涉及使用React或Vue等架構建立的JavaScript型應用程式,這些架構會以Headless方式使用並與AEM中的內容互動。
部署以Headless方式與AEM互動的SPA時,需要託管SPA並使其可透過網頁瀏覽器存取。
SPA由原生網頁資源的集合組成: HTML、CSS和JavaScript. 這些資源產生於 建置 程式(例如, npm run build
)並部署至主機,以供一般使用者使用。
有各種 託管 選項視您組織的需求而定:
雲端服務供應商 例如 Azure 或 AWS.
內部部署 在公司內託管 資料中心
前端託管平台 例如 AWS Amplify, Azure應用程式服務, Netlify, 赫羅庫, Vercel等。
託管與AEM Headless互動的SPA時,主要考量為透過AEM網域(或主機)存取SPA,或是在其他網域上存取。 原因是SPA是在網頁瀏覽器中執行的網頁應用程式,因此受網頁瀏覽器安全性原則的約束。
SPA和AEM會共用網域,當兩者均由來自相同網域的一般使用者存取時。 例如:
https://wknd.site/
https://wknd.site/spa
由於AEM和SPA都可從相同網域存取,因此網頁瀏覽器可讓SPA對AEM Headless端點執行XHR而不需要CORS,並允許共用HTTP Cookie (例如AEM) login-token
Cookie)。
如何在共用網域上路由SPA和AEM流量,由您決定:具有多種來源的CDN、具有反向Proxy的HTTP伺服器、直接在AEM中託管SPA等。
以下是SPA生產部署所需的部署設定(當託管在與AEM相同的網域上時)。
SPA連線至 | AEM 作者 | AEM 發佈 | AEM預覽 |
---|---|---|---|
Dispatcher篩選器 | ✘ | ✔ | ✔ |
跨原始資源共用(CORS) | ✘ | ✘ | ✘ |
AEM主機 | ✘ | ✘ | ✘ |
當一般使用者從不同網域存取SPA和AEM時,這些網域會有所不同。 例如:
https://wknd.site/
https://wknd-app.site/
由於AEM和SPA可從不同網域存取,因此網頁瀏覽器會強制實施安全性原則,例如 跨原始資源共用(CORS),並防止共用HTTP Cookie (例如AEM login-token
Cookie)。
以下是SPA生產部署所需的部署設定(託管在不同於AEM的網域上)。
SPA連線至 | AEM 作者 | AEM 發佈 | AEM預覽 |
---|---|---|---|
Dispatcher篩選器 | ✘ | ✔ | ✔ |
跨原始資源共用(CORS) | ✔ | ✔ | ✔ |
AEM主機 | ✔ | ✔ | ✔ |
在此範例中,SPA會部署至Netlify網域(https://main--sparkly-marzipan-b20bf8.netlify.app/
)和SPA會使用AEM發佈網域中的AEM GraphQL API (https://publish-p65804-e666805.adobeaemcloud.com
)。 以下熒幕擷取畫面強調CORS需求。
SPA是從Netlify網域提供,但會向不同網域上的AEM GraphQL API發出XHR呼叫。 此跨網站請求需要 CORS 在AEM上設定,以允許來自Netlify網域的請求存取其內容。
檢查AEM GraphQL API的XHR請求, Access-Control-Allow-Origin
存在,向網頁瀏覽器表示AEM允許來自此Netlify網域的請求存取其內容。
如果AEM CORS 遺失或不包含Netlify網域,網頁瀏覽器會失敗XHR要求,並回報CORS錯誤。
Adobe提供在React中編碼的範例單頁應用程式。