Parsys is not displaying in initial content of the editable template using RemoteSPA with react with Wknd SPA initial setup

[kalyanchakravarthych]

Hi,

I have done the basic Remote SPA with react using WKND App setup and iam getting the below issue. I didnot deploy any code specifically as well.

• Parsys is not displaying in initial content of the editable template using RemoteSPA with react . I am using the AEM version 6.5.19 and if i go to the console i see 1 error. Please help me to get resolve this issue. 

The above issue we are getting both sdk and AEM 6.5.19

Thanks & Regards,

Kalyan

[EstebanBustamante]

Hi, 

You have a CORS issue, to solve this you need to configure "Adobe Granite Cross Origin Resource Sharing Policy" and allow your React app there. This is well detailed in the SPA Remote React tutorial, take a look at this step: https://experienceleague.adobe.com/en/docs/experience-manager-learn/getting-started-with-aem-headles... and add the config.

Make sure the config is in your AEM instance and that this config has the correct port and address for your React app.

To learn more about CORS check this: https://experienceleague.adobe.com/en/docs/experience-manager-learn/foundation/security/understand-c... 

Hope this helps.

[kalyanchakravarthych]

Hi @EstebanBustamante ,

I already configured the CORS but still Iam getting the same issue. Moreover actual page is loading and showing Parsys. Also Parsys is showing in structure mode of editable template. 

PFA attached screenshot.

Thanks & Regards,

Kalyan

[EstebanBustamante]

Did you update your AEM instance port in this file: https://github.com/adobe/aem-guides-wknd-graphql/blob/main/remote-spa-tutorial/react-app/.env.develo... ? 

It looks like your React app is not appending the CORS headers while the AEM is ok. Please check this note: https://github.com/adobe/aem-guides-wknd-graphql/blob/main/remote-spa-tutorial/react-app/README.md#c...

Hope this helps

[kalyanchakravarthych]

Hi @EstebanBustamante ,

I have updated the AEM host details in environment file of react/nextjs app. Please find the below screenshot.

Not sure still why it is not working after doing all the steps followed as per the documentation.

Thanks & Regards,

Kalyan

[EstebanBustamante]

Did you check that the CORS headers are appended to the React app?

[kalyanchakravarthych]

Yes @EstebanBustamante 

[kalyanchakravarthych]

No luck still the issue is not resolved. I am not getting what is the issue.

[EstebanBustamante]

Are you still seeing the CORS issue in the browser console? 

[kalyanchakravarthych]

yes iam still showing the cors issue in console

[EstebanBustamante]

Can you try to use your AEM instance on port 4502, I know all the configurations run smoothly with that port, I have tried myself and I haven't had those problems with the OOTB configs from the tutorial.

[kalyanchakravarthych]

Hi @EstebanBustamante ,

i tried using 4502 now i dont see console errors but still the parsys is not coming in the initial content of editable template,

Thanks & Regards,

Kalyan

[EstebanBustamante]

Are you using this boilerplate? https://github.com/adobe/aem-headless-app-templates/tree/main/nextjs-remotespa

[kalyanchakravarthych]

yes iam using the same boilerplate code but still iam getting the issue