From 37fd456467c81c0674cc317e28d9bd7b56317937 Mon Sep 17 00:00:00 2001
From: Saya <379924+chu121su12@users.noreply.github.com>
Date: Mon, 23 Oct 2023 09:53:02 +0800
Subject: [PATCH] feat(vite): add client fetch mode (#3255)

---
 packages/vite/src/client.ts  |  8 ++++++--
 packages/vite/src/devtool.ts |  4 +++-
 packages/vite/src/index.ts   |  2 +-
 packages/vite/src/types.ts   | 10 ++++++++++
 4 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/packages/vite/src/client.ts b/packages/vite/src/client.ts
index a76da87209..a425cdbc08 100644
--- a/packages/vite/src/client.ts
+++ b/packages/vite/src/client.ts
@@ -1,8 +1,9 @@
 /// <reference types="vite/client" />
 /// <reference lib="dom" />
 
-function post(data: any) {
+function post(data: any, config: any) {
   return fetch('__POST_PATH__', {
+    ...config,
     method: 'POST',
     headers: {
       'Content-Type': 'application/json',
@@ -33,7 +34,10 @@ function schedule() {
     clearTimeout(_timer)
   _timer = setTimeout(() => {
     if (pendingClasses.size) {
-      post({ type: 'add-classes', data: Array.from(pendingClasses) })
+      post(
+        { type: 'add-classes', data: Array.from(pendingClasses) },
+        { mode: '__POST_FETCH_MODE__' },
+      )
       include(visitedClasses, pendingClasses)
       pendingClasses.clear()
     }
diff --git a/packages/vite/src/devtool.ts b/packages/vite/src/devtool.ts
index 65d13655c8..837e4f1830 100644
--- a/packages/vite/src/devtool.ts
+++ b/packages/vite/src/devtool.ts
@@ -5,6 +5,7 @@ import type { Plugin, ResolvedConfig, ViteDevServer } from 'vite'
 import type { IncomingMessage } from 'connect'
 import type { UnocssPluginContext } from '@unocss/core'
 import { toEscapedSelector } from '@unocss/core'
+import type { VitePluginConfig } from './types'
 
 const _dirname = typeof __dirname !== 'undefined' ? __dirname : dirname(fileURLToPath(import.meta.url))
 
@@ -39,7 +40,7 @@ function getBodyJson(req: IncomingMessage) {
   })
 }
 
-export function createDevtoolsPlugin(ctx: UnocssPluginContext): Plugin[] {
+export function createDevtoolsPlugin(ctx: UnocssPluginContext, pluginConfig: VitePluginConfig<any>): Plugin[] {
   let config: ResolvedConfig
   let server: ViteDevServer | undefined
   let clientCode = ''
@@ -144,6 +145,7 @@ export function createDevtoolsPlugin(ctx: UnocssPluginContext): Plugin[] {
             ]
               .join('\n')
               .replace('__POST_PATH__', `${(config.server?.origin ?? '')}${postPath}`)
+              .replace('__POST_FETCH_MODE__', pluginConfig.fetchMode ?? 'cors')
           }
           return config.command === 'build'
             ? ''
diff --git a/packages/vite/src/index.ts b/packages/vite/src/index.ts
index d5bc1eb045..457a30a6cf 100644
--- a/packages/vite/src/index.ts
+++ b/packages/vite/src/index.ts
@@ -42,7 +42,7 @@ export default function UnocssPlugin<Theme extends object>(
   const plugins = [
     ConfigHMRPlugin(ctx),
     ...createTransformerPlugins(ctx),
-    ...createDevtoolsPlugin(ctx),
+    ...createDevtoolsPlugin(ctx, inlineConfig),
     {
       name: 'unocss:api',
       api: <UnocssVitePluginAPI>{
diff --git a/packages/vite/src/types.ts b/packages/vite/src/types.ts
index 92659652e7..dab6c60189 100644
--- a/packages/vite/src/types.ts
+++ b/packages/vite/src/types.ts
@@ -47,4 +47,14 @@ export interface VitePluginConfig<Theme extends object = object> extends UserCon
    * @default true
    */
   hmrTopLevelAwait?: boolean
+
+  /**
+   * Fetch mode in devtools.
+   *
+   * Some server does not configure its CORS and you may want to set this to 'no-cors'.
+   * See https://github.com/unocss/unocss/issues/2822.
+   *
+   * @default 'cors'
+   */
+  fetchMode?: 'cors' | 'navigate' | 'no-cors' | 'same-origin'
 }