Error: failed with HTTP 404 when opening in playground in local development environment

[codersjj]

Summary

When using the EmbedLiveSample macro, the preview function works fine. However, after clicking the Play button, the page fails to load and displays the error message: \"Error: failed with HTTP 404\".

URL

For example: http://localhost:5042/en-US/docs/Web/SVG/Tutorial/SVG_fonts

Reproduction steps

1. Add the following code to any Markdown page:

   ```html
   <h1>Title</h1>
   ```
   
   This renders as shown below:
   
   {{EmbedLiveSample("title", "100", "30px")}}
   

2. Start the content project:

   Run yarn start to start the local preview.

3. Access the modified page:

   Open the page where you added the code.

4. Click the Play button:

   Click the Play button associated with the EmbedLiveSample.

After performing these steps, you may encounter a page load failure accompanied by the error message: \"Error: failed with HTTP 404\".

Expected behavior

The code on the left executes and renders correctly on the right.

Actual behavior

The page fails to load and displays the error message: \"Error: failed with HTTP 404\".

Device

Desktop

Browser

Chrome

Browser version

Stable

Operating system

Windows

Screenshot

Anything else?

No response

Validations

• I have read the Community Participation Guidelines.
• I have verified that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• I have checked that this is a concrete bug. For Q&A open a GitHub Discussion.

[caugner]

I can reproduce the issue as follows:

1. Run yarn start in content checkout.
2. Go to http://localhost:5042/en-US/docs/Web/API/HTMLMarqueeElement#examples (the live sample renders well).
3. Click on "Play" to open it in the Playground.
4. The Playground result shows "\"Error: failed with HTTP 404\"".

What I notice:

1. The initial ?blank request fails due to a CSP issue (this is fixed by fix(play): access blank runner on subdomain #12643, but did not land in content yet).
2. The GET http://localhost:5042/en-US/docs/Web/API/HTMLMarqueeElement//runner.html?state=fY%2FBbsJADER%2FxfIZqQiJS0T4Co6%2BJFnDLnLW4HVIq6r%2FXi2UCirUk603mtHMJ0YfBRvcjJ2dJ%2BbtLqYCzu8OcxKBMpiKwN50BEuH6OAKwnvfvN0dlCnf7RCS8eBJc0s4nQj%2Fy%2BvVXcca6Hp6nUcZniKDzpmw0jkFjy3har28gci1XiXLH9Jz7C5JrSXsxNly53xTin8It4S9WmBrikoKhNsq%2FS557f67p9cpD%2FxY%2FvHHBQ6lYIO4wOP1fn0D receives a HTTP 301 redirecting to http://localhost:5042/en-US/docs/Web/API/HTMLMarqueeElement_runner.html?state=fY%2FBbsJADER%2FxfIZqQiJS0T4Co6%2BJFnDLnLW4HVIq6r%2FXi2UCirUk603mtHMJ0YfBRvcjJ2dJ%2BbtLqYCzu8OcxKBMpiKwN50BEuH6OAKwnvfvN0dlCnf7RCS8eBJc0s4nQj%2Fy%2BvVXcca6Hp6nUcZniKDzpmw0jkFjy3har28gci1XiXLH9Jz7C5JrSXsxNly53xTin8It4S9WmBrikoKhNsq%2FS557f67p9cpD%2FxY%2FvHHBQ6lYIO4wOP1fn0D, which receives an HTTP 500 with the "\"Error: failed with HTTP 404\"" body.

This appears to be caused by the double-slash: HTMLMarqueeElement//runner.html instead of HTMLMarqueeElement/runner.html.