Fix Storybook pattern library proxying in Node 18

client/storybook/middleware.js

@@ -1,7 +1,8 @@
 /* eslint-disable @typescript-eslint/no-var-requires, import/no-extraneous-dependencies */
 const middleware = require('storybook-django/src/middleware');
 
-const origin = process.env.TEST_ORIGIN ?? 'http://localhost:8000';
+// Target the Django server with IPV4 address explicitly to avoid DNS resolution of localhost to IPV6.
+const origin = process.env.TEST_ORIGIN ?? 'http://127.0.0.1:8000';
 
 module.exports = middleware.createDjangoAPIMiddleware({
   origin,

docs/contributing/developing.md

@@ -200,7 +200,7 @@ npm --prefix client/tests/integration install
 npm run test:integration
 ```
 
-Integration tests target `http://localhost:8000` by default. Use the `TEST_ORIGIN` environment variable to use a different port, or test a remote Wagtail instance: `TEST_ORIGIN=http://localhost:9000 npm run test:integration`.
+Integration tests target `http://127.0.0.1:8000` by default. Use the `TEST_ORIGIN` environment variable to use a different port, or test a remote Wagtail instance: `TEST_ORIGIN=http://127.0.0.1:9000 npm run test:integration`.
 
 ### Browser and device support
 

wagtail/test/settings_ui.py

@@ -9,6 +9,9 @@ INSTALLED_APPS += [  # noqa
     "pattern_library",
 ]
 
+# Allow loopback address to access the server without DNS resolution (lack of Happy Eyeballs in Node 18).
+ALLOWED_HOSTS += ["127.0.0.1"]  # noqa
+
 TEMPLATES[0]["OPTIONS"]["builtins"] = ["pattern_library.loader_tags"]  # noqa
 
 PATTERN_LIBRARY = {