diff --git a/index.ts b/index.ts
index e01093f..3d52091 100644
--- a/index.ts
+++ b/index.ts
@@ -8,12 +8,16 @@ import * as pluginApi from "./test_web/api/plugins";
 import localizedFormat from "dayjs/plugin/localizedFormat";
 interface GlobalState {
     UserAgent?: string,
+    Cookie?: string,
 }
 let globalState: GlobalState = {
 }
 
-export const getUserAgent = () => {
-    return globalState.UserAgent;
+export const getHeaders = () => {
+    return {
+       'User-Agent': globalState.UserAgent,
+       'Cookie': globalState.Cookie, 
+    };
 };
 
 const app = express();
@@ -22,15 +26,29 @@ const host = "localhost";
 
 const dirname = path.join(__dirname, "..");
 
+app.use((req, res, next) => {
+    globalState.UserAgent = req.headers["user-agent"];
+    console.log('---------');
+    console.log('default headers: ', globalState);
+    console.log('---------');
+    console.log();
+    next();
+});
 app.use(bodyParser.json());
 app.use("/static", express.static(path.join(dirname, "test_web", "static")));
 app.use("/icons", express.static(path.join(dirname, "icons")));
 app.get("/all_plugins", (req, res) => {
-    globalState.UserAgent = req.headers["user-agent"];
-    console.log(globalState);
     const allPlugins = pluginApi.all_plugins();
     res.json(allPlugins);
 });
+app.post("/add_cookie", async (req, res) => {
+    globalState.Cookie = req.body['cookie'];
+    console.log('---------');
+    console.log('default headers: ', globalState);
+    console.log('---------');
+    console.log();
+    res.json({});
+}); 
 app.post("/filters", async (req, res) => {
     const filters = await pluginApi.getFilter(req.body['pluginRequirePath']);
     res.json(filters || []);
diff --git a/libs/fetch.ts b/libs/fetch.ts
index 4f6b7de..3678fa3 100644
--- a/libs/fetch.ts
+++ b/libs/fetch.ts
@@ -5,35 +5,35 @@ export async function fetchApi(
         [x: string]: string | Record<string,string> | undefined | FormData | Headers;
     },
 ) {
-    let userAgent: string | undefined;
+    let defaultHeaders: {
+        'User-Agent'?: string,
+        'Cookie'?: string,
+    } = {};
     try {
-        // get your user agent when you open localhost:3000
-        const getUserAgent = (await import('../index.js')).getUserAgent;
-        userAgent = getUserAgent();
+        const getHeaders = (await import('../index.js')).getHeaders;
+        defaultHeaders = getHeaders();
     }catch{
         // nothing to do
     }
 
-    // there're 2 type of Headers, plain object {} or Headers instance
-    if(userAgent) {
-        if(init?.headers) {
-            if(init.headers instanceof Headers){ 
-                if(!init.headers.get('User-Agent')){
-                    init.headers.set('User-Agent', userAgent);
-                }
-            }else{
-                init.headers = {
-                    "User-agent": userAgent,
-                    ...init.headers
-                }
+    if(init?.headers) {
+        if(init.headers instanceof Headers){ 
+            if(!init.headers.get('User-Agent') && defaultHeaders['User-Agent']){
+                init.headers.set('User-Agent', defaultHeaders['User-Agent']);
+            }
+            if(defaultHeaders.Cookie) {
+                init.headers.set('Cookie', defaultHeaders.Cookie);
             }
         }else{
-            init = {
-                ...init,
-                headers: {
-                    "User-Agent": userAgent
-                }
-            }
+            init.headers = {
+                ...defaultHeaders,
+                ...init.headers,
+            };
+        }
+    }else{
+        init = {
+            ...init,
+            headers: defaultHeaders
         }
     }
 
diff --git a/test_web/index.html b/test_web/index.html
index 8784008..509f552 100644
--- a/test_web/index.html
+++ b/test_web/index.html
@@ -50,6 +50,14 @@
             </script>
     </nav>
     <div id="test-container">
+        <div class="test-wrapper" id="add-cookie">
+            <div class="form-group">
+                <label for="cookie">Cookie 🍪</label> <span id="cookie-content"></span> 
+                <input type="email" class="form-control" id="cookie" aria-describedby="cookieHelp" placeholder="cf_clearance=abcxyzblalba">
+                <small id="cookieHelp" class="form-text text-muted">Add cookie into headers to bypass cloudflare</small>
+                <button type="button" class="btn btn-primary" id="add-cookie-btn">Add</button>
+            </div>
+        </div>
         <div class="test-wrapper" id="popularNovels">
             <div class="modal-container">
                 <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#filtersModal">
diff --git a/test_web/static/js/index.js b/test_web/static/js/index.js
index 80143c5..114311d 100644
--- a/test_web/static/js/index.js
+++ b/test_web/static/js/index.js
@@ -922,6 +922,23 @@ class PluginWrapper {
     }
 }
 
+$("#add-cookie-btn").on("click", () => {
+    const cookie = $('#cookie').val();
+    fetch('/add_cookie', {
+        method: 'POST',
+        headers: {
+            "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+            'cookie': cookie,
+        }),
+    }).then(() => {
+        $('#cookie').val('');
+        $('#cookie-content').text(`: ${cookie}`);
+    })
+        
+})
+
 $(".popularNovels-btn").on("click", () =>
     state.current_plugin?.getPopularNovels()
 );