diff --git a/app/assets/javascripts/ide/monaco_loader.js b/app/assets/javascripts/ide/monaco_loader.js
index af83a1ec0b4..142a220097b 100644
--- a/app/assets/javascripts/ide/monaco_loader.js
+++ b/app/assets/javascripts/ide/monaco_loader.js
@@ -6,6 +6,11 @@ monacoContext.require.config({
   },
 });
 
+// ignore CDN config and use local assets path for service worker which cannot be cross-domain
+const relativeRootPath = (gon && gon.relative_url_root) || '';
+const monacoPath = `${relativeRootPath}/assets/webpack/monaco-editor/vs`;
+window.MonacoEnvironment = { getWorkerUrl: () => `${monacoPath}/base/worker/workerMain.js` };
+
 // eslint-disable-next-line no-underscore-dangle
 window.__monaco_context__ = monacoContext;
 export default monacoContext.require;
diff --git a/changelogs/unreleased/42641-monaco-service-workers-do-not-work-with-cdn-enabled.yml b/changelogs/unreleased/42641-monaco-service-workers-do-not-work-with-cdn-enabled.yml
new file mode 100644
index 00000000000..955a5a27e21
--- /dev/null
+++ b/changelogs/unreleased/42641-monaco-service-workers-do-not-work-with-cdn-enabled.yml
@@ -0,0 +1,5 @@
+---
+title: Fix monaco editor features which were incompatable with GitLab CDN settings
+merge_request: 17021
+author:
+type: fixed