Playground fails to connect to server on Safari when connecting via localhost

[ArmandAgopian]

This issue pertains to the following package(s):

• [ ] GraphQL Playground - Electron App
• [ ] GraphQL Playground HTML
• [ ] GraphQL Playground
• [X] GraphQL Playground Express Middleware
• [ ] GraphQL Playground Hapi Middleware
• [ ] GraphQL Playground Koa Middleware
• [ ] GraphQL Playground Lambda Middleware

What OS and OS version are you experiencing the issue(s) on?

macOS 13.2, Safari 16.3 (18614.4.6.1.5)

What version of graphql-playground(-electron/-middleware) are you experiencing the issue(s) on?

express middleware 1.7.23

What is the expected behavior?

Playground can be reached via localhost and make queries/check schema

What is the actual behavior?

Playground loads fine, but can't connect to server. Error below. This does not happen when connecting via 127.0.0.1

What steps may we take to reproduce the behavior?

Connect to Playground via localhost on Safari

Please provide a g if or image of the issue for a quicker response/fix.

[strefethen]

This sounds like an issue I've run into too. My problem is that render-playground-page.js uses URLs without specifying the protocol and fetches using "http" vs. "https" fail.

Note, until/unless this is fixed in the repo you will have to make this change every time you delete node_modules or reinstall all packages and overwrite your manual change.

In the following code change the URL after "void 0 ? ' from '//cdn.jsdelivr..' to 'https://cdn.jsdelivr...'

var getCdnMarkup = function (_a) {
    var version = _a.version, _b = _a.cdnUrl, cdnUrl = _b === void 0 ? 'https://cdn.jsdelivr.net/npm' : _b, faviconUrl = _a.faviconUrl;
    var buildCDNUrl = function (packageName, suffix) { return filter(cdnUrl + "/" + packageName + (version ? "@" + version : '') + "/" + suffix || ''); };
    return "\n    <link\n      rel=\"stylesheet\"\n      href=\"" + buildCDNUrl(reactPackageName, 'build/static/css/index.css') + "\"\n    />\n    " + (typeof faviconUrl === 'string' ? "<link rel=\"shortcut icon\" href=\"" + filter(faviconUrl || '') + "\" />" : '') + "\n    " + (faviconUrl === undefined ? "<link rel=\"shortcut icon\" href=\"" + buildCDNUrl(reactPackageName, 'build/favicon.png') + "\" />" : '') + "\n    <script\n      src=\"" + buildCDNUrl(reactPackageName, 'build/static/js/middleware.js') + "\"\n    ></script>\n";
};