Installieren der erforderlichen Abhängigkeiten
Installieren Sie die folgenden Abhängigkeiten in Ihrem React-Projekt, um adaptive Headless-Formulare in Ihrem React-Projekt zu verwenden
- @aemforms/af-react-components
- @aemforms/af-react-renderer
Aktualisieren Sie die package.json, um die folgenden Abhängigkeiten einzuschließen. Zum Zeitpunkt des Schreibens war 0.22.41 die aktuelle Version
"@aemforms/af-react-components": "^0.22.41",
"@aemforms/af-react-renderer": "^0.22.41",
Einrichten des Proxy
Cross-Origin Resource Sharing (CORS) ist ein Sicherheitsmechanismus, der Webbrowser daran hindert, Anfragen an eine andere Domain als die zu stellen, auf der die App gehostet wird. CORS-Fehler können auftreten, wenn Sie versuchen, Daten von einer API abzurufen, die auf einer anderen Domäne gehostet wird. Indem Sie einen Proxy einrichten, können Sie CORS-Einschränkungen umgehen und über Ihre React-App Anfragen an die API richten. Ich habe den folgenden Code in einer Datei namens setUpProxy.js im src-Ordner verwendet. Vergewissern Sie sich, dass Sie das Ziel so ändern, dass es auf Ihre Veröffentlichungsinstanz verweist.
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)
);
};
Außerdem müssen Sie das http-proxy-middleware-Modul installieren und zu Ihrem Projekt hinzufügen.