Installerar nödvändiga beroenden

Om du vill börja använda headless adaptive-formulär i ditt svarsprojekt måste du installera följande beroenden i ditt svarsprojekt

Uppdatera package.json så att den innehåller följande beroenden. När 0.22.41 skrevs var den nuvarande versionen

"@aemforms/af-react-components": "^0.22.41",
"@aemforms/af-react-renderer": "^0.22.41",

Konfigurera proxy

Cross-Origin Resource Sharing (CORS) är en säkerhetsmekanism som förhindrar webbläsare från att göra förfrågningar till en annan domän än den som appen finns på. CORS-fel kan uppstå när du försöker hämta data från ett API på en annan domän. Genom att konfigurera en proxy kan du kringgå CORS-begränsningar och göra förfrågningar till API:t från din React-app. Jag har använt följande kod i filen setUpProxy.js i mappen src. Kontrollera att du ändrar målet så att det pekar på din publiceringsinstans.

const { createProxyMiddleware } = require('http-proxy-middleware');
const proxy = {
    target: 'https://mypublishinstance:4503/',
    changeOrigin: true
}
module.exports = function(app) {
  app.use(
    '/adobe',
    createProxyMiddleware(proxy)
  ),
  app.use(
    '/content',
    createProxyMiddleware(proxy)
  );
};

Du måste också installera och lägga till modulen http-proxy-middleware i ditt projekt.

Nästa steg

Hämta formuläret som ska bäddas in