Fix CORS issues with tunnels (#167)

barrel · Feb 5, 2025 · b8d8e7e · b8d8e7e
1 parent bfc69ce
commit b8d8e7e
Show file tree

Hide file tree

Showing 8 changed files with 151 additions and 163 deletions.
diff --git a/docs/guide/troubleshooting.md b/docs/guide/troubleshooting.md
@@ -2,6 +2,32 @@
 
 If the suggestions here don't work, please try posting questions on [GitHub Discussions](https://github.com/barrel/shopify-vite/discussions).
 
+## Dev Server Cross-Origin Resource Sharing (CORS)
+
+If you're facing CORS issues while fetching assets from the Vite dev server, allow access for your custom origin using [Vite's built-in CORS configuration](https://vite.dev/config/server-options.html#server-cors). You can specify multiple origins in the `server.cors.origin` option in your vite.config.js file.
+
+::: code-group
+
+```js [vite.config.js]
+import shopify from 'vite-plugin-shopify'
+
+export default {
+  plugins: [
+    shopify()
+  ],
+  server: { // [!code ++]
+    cors: { // [!code ++]
+      origin: [ // [!code ++]
+        /^https?:\/\/(?:(?:[^:]+\.)?localhost|127\.0\.0\.1|\[::1\])(?::\d+)?$/, // [!code ++]
+        'https://johns-apparel.myshopify.com', // [!code ++]
+        'https://johnsapparel.com' // [!code ++]
+      ] // [!code ++]
+    } // [!code ++]
+  } // [!code ++]
+}
+```
+:::
+
 ## How to launch the Shopify and Vite servers in parallel? {#launch-shopify-vite}
 
 You can use [`concurrently`](https://github.com/open-cli-tools/concurrently) or [`npm-run-all`](https://github.com/mysticatea/npm-run-all) and [script commands](https://docs.npmjs.com/cli/v8/using-npm/scripts) to launch Vite and Shopify servers in parallel.

diff --git a/examples/vite-shopify-example/package.json b/examples/vite-shopify-example/package.json
@@ -12,7 +12,7 @@
     "cross-env": "^7.0.3",
     "sass": "^1.52.2",
     "tsconfig": "workspace:*",
-    "vite": "^6.0.0",
+    "vite": "^6.0.11",
     "vite-plugin-page-reload": "workspace:*",
     "vite-plugin-shopify": "workspace:*"
   },

diff --git a/packages/vite-plugin-shopify/CHANGELOG.md b/packages/vite-plugin-shopify/CHANGELOG.md
@@ -1,5 +1,11 @@
 # vite-plugin-shopify
 
+## 3.2.0
+
+### Minor Changes
+
+- Set Vite's new allowedHosts setting when using tunnels to fix CORS issues
+
 ## 3.1.1
 
 ### Patch Changes

diff --git a/packages/vite-plugin-shopify/package.json b/packages/vite-plugin-shopify/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vite-plugin-shopify",
-  "version": "3.1.1",
+  "version": "3.2.0",
   "description": "Vite plugin providing integration for Shopify themes",
   "type": "module",
   "repository": {
@@ -32,7 +32,7 @@
     "test": "vitest run"
   },
   "peerDependencies": {
-    "vite": "^5.0.0 || ^6.0.0"
+    "vite": ">=5.4.12 <6.0.0 || >=6.0.9"
   },
   "dependencies": {
     "@shopify/cli-kit": "^3.67.2",

diff --git a/packages/vite-plugin-shopify/src/html.ts b/packages/vite-plugin-shopify/src/html.ts
@@ -41,6 +41,7 @@ export default function shopifyHTML (options: Required<Options>): Plugin {
 
       if (tunnelConfig.frontendPort !== -1) {
         config.server.port = tunnelConfig.frontendPort
+        config.server.allowedHosts = [new URL(tunnelConfig.frontendUrl).hostname]
       }
 
       httpServer?.once('listening', () => {
@@ -75,6 +76,7 @@ export default function shopifyHTML (options: Required<Options>): Plugin {
               })
               tunnelClient = hook.valueOrAbort()
               tunnelUrl = await pollTunnelUrl(tunnelClient)
+              config.server.allowedHosts = [new URL(tunnelUrl).hostname]
               isTTY() && renderInfo({ body: `${viteDevServerUrl} is tunneled to ${tunnelUrl}` })
               const viteTagSnippetContent = viteTagSnippetPrefix(config) + viteTagSnippetDev(
                 tunnelUrl, options.entrypointsDir, reactPlugin

diff --git a/packages/vite-plugin-shopify/test/__snapshots__/index.test.ts.snap b/packages/vite-plugin-shopify/test/__snapshots__/index.test.ts.snap
@@ -7,16 +7,16 @@ exports[`vite-plugin-shopify > builds out .liquid files for production 1`] = `
 {% endcomment %}
 {% assign path = vite-tag | replace: '@@/', '../../resources/js/' | replace: '~/', '../' | replace: '@/', '../' %}
 {% if path == \\"/test/__fixtures__/frontend/entrypoints/customers.js\\" or path == \\"customers.js\\" %}
-  <script src=\\"{{ 'customers-eJQN4JmY.js' | asset_url | split: '?' | first }}\\" type=\\"module\\" crossorigin=\\"anonymous\\"></script>
-  <link rel=\\"modulepreload\\" href=\\"{{ 'modulepreload-polyfill-9p4a8sJU.js' | asset_url | split: '?' | first }}\\" crossorigin=\\"anonymous\\">
-  <link rel=\\"modulepreload\\" href=\\"{{ 'foo-fo_u-S9j.js' | asset_url | split: '?' | first }}\\" crossorigin=\\"anonymous\\">
-  {{ 'foo-KvHhgPs6.css' | asset_url | split: '?' | first | stylesheet_tag: preload: preload_stylesheet }}
-  {{ 'customers-XJE1fJUn.css' | asset_url | split: '?' | first | stylesheet_tag: preload: preload_stylesheet }}
+  <script src=\\"{{ 'customers-MM9Bv3NP.js' | asset_url | split: '?' | first }}\\" type=\\"module\\" crossorigin=\\"anonymous\\"></script>
+  <link rel=\\"modulepreload\\" href=\\"{{ 'modulepreload-polyfill-B5Qt9EMX.js' | asset_url | split: '?' | first }}\\" crossorigin=\\"anonymous\\">
+  <link rel=\\"modulepreload\\" href=\\"{{ 'foo-CpK_S8xR.js' | asset_url | split: '?' | first }}\\" crossorigin=\\"anonymous\\">
+  {{ 'foo-Dei2f1sT.css' | asset_url | split: '?' | first | stylesheet_tag: preload: preload_stylesheet }}
+  {{ 'customers-CTbC3cH9.css' | asset_url | split: '?' | first | stylesheet_tag: preload: preload_stylesheet }}
 {% elsif path == \\"/test/__fixtures__/frontend/entrypoints/theme.css\\" or path == \\"theme.css\\" %}
-  {{ 'theme-kiakkSUl.css' | asset_url | split: '?' | first | stylesheet_tag: preload: preload_stylesheet }}
+  {{ 'theme-y6Yj_vm2.css' | asset_url | split: '?' | first | stylesheet_tag: preload: preload_stylesheet }}
 {% elsif path == \\"/test/__fixtures__/frontend/entrypoints/theme.js\\" or path == \\"theme.js\\" %}
-  <script src=\\"{{ 'theme-47GZ2s79.js' | asset_url | split: '?' | first }}\\" type=\\"module\\" crossorigin=\\"anonymous\\"></script>
-  <link rel=\\"modulepreload\\" href=\\"{{ 'modulepreload-polyfill-9p4a8sJU.js' | asset_url | split: '?' | first }}\\" crossorigin=\\"anonymous\\">
+  <script src=\\"{{ 'theme-Df-cUSaP.js' | asset_url | split: '?' | first }}\\" type=\\"module\\" crossorigin=\\"anonymous\\"></script>
+  <link rel=\\"modulepreload\\" href=\\"{{ 'modulepreload-polyfill-B5Qt9EMX.js' | asset_url | split: '?' | first }}\\" crossorigin=\\"anonymous\\">
 {% endif %}
 "
 `;
@@ -28,16 +28,16 @@ exports[`vite-plugin-shopify > builds out .liquid files for production with vers
 {% endcomment %}
 {% assign path = vite-tag | replace: '@@/', '../../resources/js/' | replace: '~/', '../' | replace: '@/', '../' %}
 {% if path == \\"/test/__fixtures__/frontend/entrypoints/customers.js\\" or path == \\"customers.js\\" %}
-  <script src=\\"{{ 'customers-eJQN4JmY.js' | asset_url }}\\" type=\\"module\\" crossorigin=\\"anonymous\\"></script>
-  <link rel=\\"modulepreload\\" href=\\"{{ 'modulepreload-polyfill-9p4a8sJU.js' | asset_url }}\\" crossorigin=\\"anonymous\\">
-  <link rel=\\"modulepreload\\" href=\\"{{ 'foo-fo_u-S9j.js' | asset_url }}\\" crossorigin=\\"anonymous\\">
-  {{ 'foo-KvHhgPs6.css' | asset_url | stylesheet_tag: preload: preload_stylesheet }}
-  {{ 'customers-XJE1fJUn.css' | asset_url | stylesheet_tag: preload: preload_stylesheet }}
+  <script src=\\"{{ 'customers-MM9Bv3NP.js' | asset_url }}\\" type=\\"module\\" crossorigin=\\"anonymous\\"></script>
+  <link rel=\\"modulepreload\\" href=\\"{{ 'modulepreload-polyfill-B5Qt9EMX.js' | asset_url }}\\" crossorigin=\\"anonymous\\">
+  <link rel=\\"modulepreload\\" href=\\"{{ 'foo-CpK_S8xR.js' | asset_url }}\\" crossorigin=\\"anonymous\\">
+  {{ 'foo-Dei2f1sT.css' | asset_url | stylesheet_tag: preload: preload_stylesheet }}
+  {{ 'customers-CTbC3cH9.css' | asset_url | stylesheet_tag: preload: preload_stylesheet }}
 {% elsif path == \\"/test/__fixtures__/frontend/entrypoints/theme.css\\" or path == \\"theme.css\\" %}
-  {{ 'theme-kiakkSUl.css' | asset_url | stylesheet_tag: preload: preload_stylesheet }}
+  {{ 'theme-y6Yj_vm2.css' | asset_url | stylesheet_tag: preload: preload_stylesheet }}
 {% elsif path == \\"/test/__fixtures__/frontend/entrypoints/theme.js\\" or path == \\"theme.js\\" %}
-  <script src=\\"{{ 'theme-47GZ2s79.js' | asset_url }}\\" type=\\"module\\" crossorigin=\\"anonymous\\"></script>
-  <link rel=\\"modulepreload\\" href=\\"{{ 'modulepreload-polyfill-9p4a8sJU.js' | asset_url }}\\" crossorigin=\\"anonymous\\">
+  <script src=\\"{{ 'theme-Df-cUSaP.js' | asset_url }}\\" type=\\"module\\" crossorigin=\\"anonymous\\"></script>
+  <link rel=\\"modulepreload\\" href=\\"{{ 'modulepreload-polyfill-B5Qt9EMX.js' | asset_url }}\\" crossorigin=\\"anonymous\\">
 {% endif %}
 "
 `;
diff --git a/packages/vite-plugin-shopify/test/html.test.ts b/packages/vite-plugin-shopify/test/html.test.ts
@@ -140,6 +140,8 @@ describe('vite-plugin-shopify:html', () => {
 
     const tagsHtml = await fs.readFile(path.join(__dirname, '__fixtures__', 'snippets', 'vite-tag.liquid'), { encoding: 'utf8' })
 
+    expect(mockViteDevServer.config.server.allowedHosts).toContain(new URL(mockResult.url).hostname)
+
     expect(tagsHtml).toMatchSnapshot()
 
     vi.useRealTimers()
@@ -162,6 +164,8 @@ describe('vite-plugin-shopify:html', () => {
 
     const tagsHtml = await fs.readFile(path.join(__dirname, '__fixtures__', 'snippets', 'vite-tag.liquid'), { encoding: 'utf8' })
 
+    expect(mockViteDevServer.config.server.allowedHosts).toContain(new URL(options.tunnel).hostname)
+
     expect(tagsHtml).toMatchSnapshot()
 
     vi.useRealTimers()