CORS error during initialization of WebViewer - translation file

[ihmihm]

Product: React Apryse SDK

Product Version: @pdftron/webviewer": ^11.4.0

Please give a brief summary of your issue:
Translation file CORS error when using module federated app on “Main” application

Please describe your issue and provide steps to reproduce it:

1. Create NX React application using Webpack.
2. Expose component which renders WebViewer to view file in the module federation.
3. Use the exposed component via loading remote module from URL where that application is running - lets say localhost:4200 for main app and localhost:4205 where the app which contains module-federated component runs.
4. When Apryse WebViewer is initialized, it fetches: http://localhost:4205/lib/ui/i18n/translation-en.json - this file exists on locahost:4205 as i can access it via browser ( if i paste the link ).
5. Observe: fetch of translation file returns CORS error ( even locally )

[system]

Hello, I’m AiRon, an automated tech support bot
While you wait for one of our customer support representatives, I can help you with your question.

It seems like you’re encountering a CORS (Cross-Origin Resource Sharing) error when trying to load a translation file for Apryse WebViewer in a module federated setup. This usually happens because the browser blocks requests to a different origin that doesn’t explicitly allow such requests.

Some things you can try:

• Ensure that your server hosting the translation file has configured CORS correctly to allow requests from the domain where your main application is running.


• On the server hosting the translation file, set the Access-Control-Allow-Origin header to the specific origin of your main application or to * if you want to allow requests from any origin (though this is not recommended for production).


• Check if the server also includes the Access-Control-Allow-Credentials header set to true if you are sending requests with credentials (like cookies or HTTP authentication).


• Make sure that your WebViewer initialization settings are correctly pointing to the right URLs and paths.

Here are some resources that might help you:

• MDN Web Docs: CORS - A comprehensive guide on how CORS works and how to configure it.


• Get Started with Apryse WebViewer SDK in a React Project - A guide to help you set up WebViewer in React applications.


• Setting up WebViewer BIM Client - Information about including credentials in cross-origin requests.


• WebViewer Server Configuration Options - Information on configuring server options for WebViewer.


• MDN Web Docs: Using Fetch - Learn about the Fetch API and how to handle cross-origin requests.

Hopefully, this helps you solve your problem while you wait for a human to get back to you.

[darian.chen]

Hello Ihor,

Thank you for contacting Apryse Forums.

1. Could you share the snippet of code used to initialize WebViewer in your application? Are you setting the language?
2. How is CORS configured on your localhost server where the module federated component is hosted? How are the headers being set for Access-Control-Allow-Origin?
3. If possible, please provide the headers from the network request for the translation-en.json or whichever language file.
4. Any specific console error messages being displayed?

In addition, could you try the solution here?

How to Label preset buttons in webviewer

Fixed this issue by hosting a custom json file in the PCF library and imported it to the app. import step: import * as customTranslations from ‘./translations/custom-en.json’; Setting step: instance.UI.setTranslations(‘en’, customTranslations); Translation file [image]

Best Regards,
Darian

[ihmihm]

Hi Darian,
It seems that out devops has resolved the issue somehow, it might still be present locally, but that does not bother me.
Thanks.