1  # Main vs Renderer Process
 2  
 3  A **Electron** application is divided into code into a Main process and a Renderer process.
 4  
 5  **"Main"** is the code of `src/main` and is mainly the process code handled by Electron. **"Renderer"** is the code of `src/renderer`, mainly for front-end rendering process like Vue.
 6  
 7  In general, **Node.js** scripts cannot be run in the renderer process. Examples include modules that contain APIs used by Node.js, or native modules of **Node.js** such as `path` or `net`, `os` or `crypto`.
 8  
 9  Preload scripts are run before the renderer is loaded. It creates a bridge to the main process to keep the execution of Node.js scripts in the renderer area separate and isolated for security reasons.
10  
11  For secure script execution, it is recommended that the main process executes the Node scripts, and the renderer receives the execution results via messaging. This can be implemented via **IPC communication**.
12  
13  For more information on this, see the following articles: https://www.electronjs.org/docs/latest/tutorial/ipc
14  
15  ### How to run Node.js on a renderer?
16  
17  If you want to skip the security issues and use Node.js scripts in your renderer, you need to set `nodeIntegration` to `true` in your `vite.config.ts` file.
18  
19  ```javascript
20  rendererPlugin({
21    nodeIntegration: true
22  })
23  ```
24  
25  For more information on this, see the following articles: https://github.com/electron-vite/vite-plugin-electron-renderer
26  
27  ### How to handle CORS restrictions in development?
28  
29  WebSecurity is enabled by default (in `DEFAULT_WEB_PREFERENCES`) for production-grade security. However, during backend development/debugging:
30  
31  - Temporarily disable webSecurity if:
32    - Backend lacks CORS headers (Access-Control-Allow-Origin, etc.)
33    - Preflight OPTIONS requests receive 302 redirects (non-standard handling)
34  
35  This allows direct POST requests to chat completions API without browser-enforced CORS restrictions.
36  
37  > [!WARNING] Only use this workaround for local development. Please re-enable webSecurity before deploying to production environments.
38  
39  For more information on this, see the following articles: https://www.electronjs.org/docs/latest/tutorial/security