XMLHttpRequest from origin ‘http://127.0.0.1:8080’ has been blocked by CORS policy in marian-m12l STUdio

Explanation of the problem

A security issue has been reported with the Web UI, preventing successful loading of the Web UI and use of STUdio. Error messages are displayed on the screen and the Web UI is unable to load the locales. This issue appears to be related to a previously closed issue #9.

Steps to Reproduce To reproduce the issue, simply follow the instructions in the Readme and ensure the correct requirements are met. Launch the script and load the Web UI through Firefox or Chrome in their latest versions.

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-web-security --user-data-dir=%UserProfile%

Technical Details The issue seems to be caused by a CORS policy error, as indicated by the following logs from the Chrome DevTools:

(index):1 Access to XMLHttpRequest at 'http://localhost:8080/locales/en/translation.json' from origin 'http://127.0.0.1:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
localhost:8080/locales/en/translation.json:1 Failed to load resource: net::ERR_FAILED

The environment in which the issue was reported includes:

• OS: Windows 10 1909 x64
• Browser: Chrome v81 x64 & Firefox 75 x64
• Java version: JDK 11+
• STUdio application version: 0.1.13
• Script hosted locally on Windows 10 or on a remote Linux Server

A temporary solution for this issue has been found in disabling web security when starting Chrome by launching it from the command prompt with the following command:

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-web-security --user-data-dir=%UserProfile%

It’s also worth to mention that the same issue happened from a client web browser on Windows 10.

Troubleshooting with the Lightrun Developer Observability Platform

Getting a sense of what’s actually happening inside a live application is a frustrating experience, one that relies mostly on querying and observing whatever logs were written during development.
Lightrun is a Developer Observability Platform, allowing developers to add telemetry to live applications in real-time, on-demand, and right from the IDE.

• Instantly add logs to, set metrics in, and take snapshots of live applications
• Insights delivered straight to your IDE or CLI
• Works where you do: dev, QA, staging, CI/CD, and production

Start for free today

Problem solution for XMLHttpRequest from origin ‘http://127.0.0.1:8080’ has been blocked by CORS policy in marian-m12l STUdio

The issue seems to be caused by a CORS policy error, which stands for “Cross-Origin Resource Sharing”. CORS is a mechanism that allows a web page from one domain to access resources from a different domain. When a browser makes a cross-origin request, the browser sends a request to the server with an Origin header, which indicates the origin of the request. The server can then decide to allow or deny the request based on the origin.

In this case, the browser is making a request to http://localhost:8080/locales/en/translation.json from http://127.0.0.1:8080/ . The origin of the request is http://127.0.0.1:8080/ and the server is not returning an “Access-Control-Allow-Origin” header in the response. Therefore, the browser is blocking the request, and the Web UI is not able to load the locales.

A solution for this issue is to configure the server to return the appropriate headers in the response. The server should return the “Access-Control-Allow-Origin” header with the appropriate origin value. This can typically be done using a server-side middleware. For example, in Node.js, you can use the cors package to configure the server to return the appropriate headers:

var cors = require('cors');
app.use(cors());

Alternatively, you can use a client-side solution, such as disabling web security when starting Chrome or Firefox by launching it from the command prompt. This can be done by adding the command line options –disable-web-security –user-data-dir=%UserProfile% as follows:

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-web-security --user-data-dir=%UserProfile%

It’s important to note that disabling web security should only be done in a development environment and not in a production environment, as it can potentially open security vulnerabilities.

Other popular problems with STUdio

Problem: Compatibility issues

One of the most common problems with software applications is compatibility issues. This can occur when the application is not compatible with the operating system, hardware, or other software on a user’s system. This can cause the application to crash or not function properly.

Solution:

To solve this problem, developers can test the application on a variety of different systems and configurations to ensure compatibility. Additionally, developers can release updates and patches that address compatibility issues as they are discovered. Users can also check the system requirements for the application before installing it, to ensure that their system meets the minimum requirements.

Problem: Performance issues

Another common problem with software applications is performance issues. This can occur when the application is not optimized for the hardware it is running on, or when there are too many background processes running on the user’s system.

Solution:

To solve this problem, developers can optimize the application for the specific hardware it is running on, and ensure that it is not using too many system resources. Users can also close unnecessary background processes, and ensure that their system meets the minimum requirements for the application.

Problem: Bugs and glitches

A third common problem with software applications is bugs and glitches. These can occur when the code is not written correctly, or when there are errors in the data. This can cause the application to crash or not function properly.

Solution:

To solve this problem, developers can test the application thoroughly before releasing it, and fix any bugs or glitches that are discovered. Additionally, developers can release updates and patches that address bugs and glitches as they are discovered. Users can also report any bugs or glitches they encounter, so that the developers can investigate and fix them.

A brief introduction to STUdio

STUdio (Story Teller Unleashed) is a software application that allows users to create, edit, and publish interactive stories. The application may use various multimedia elements such as text, images, audio, and video to enhance the story-telling experience. STUdio may also allow users to add interactive elements such as buttons, links, and forms to the stories. The application may support different formats and languages, and allow users to export their stories in different formats such as HTML, PDF, and e-book.

STUdio may be built using various technologies such as JavaScript, HTML, and CSS. The application may be built on top of a framework such as React or Angular, which allows the developers to build reusable UI components that can be easily composed to create complex user interfaces. STUdio may also use a database to store and retrieve data such as user accounts, stories, and multimedia elements. The application may also use API’s to allow users to interact with the application and to access external data sources.

Most popular use cases for STUdio

1. Creating interactive stories STUdio allows users to create interactive stories by using various multimedia elements such as text, images, audio, and video. Users can also add interactive elements such as buttons, links, and forms to the stories. This can enhance the story-telling experience and make it more engaging for the audience.

<div>
  <img src="story_cover.jpg" alt="Story Cover">
  <h1>Story Title</h1>
  <p>Story Description</p>
  <button onClick="startStory()">Start Story</button>
</div>

function exportStory() {
  var storyHTML = document.getElementById("story").innerHTML;
  var storyTitle = document.getElementById("storyTitle").innerHTML;
  var storyAuthor = document.getElementById("storyAuthor").innerHTML;
  var pdf = new jsPDF();
  pdf.text(20, 20, storyTitle);
  pdf.text(20, 30, storyAuthor);
  pdf.fromHTML(storyHTML, 15, 40);
  pdf.save("story.pdf");
}