Vite+typeScript搭建的vue3项目proxy代理解决跨域问题

最新推荐文章于 2025-10-11 11:10:00 发布
原创 最新推荐文章于 2025-10-11 11:10:00 发布 · 2.2k 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#typescript #跨域 #vite

跨域接口链接，以此链接为例：https://www.wanandroid.com/banner/json

我们查看vite官网跨域教程

配置 Vite {#configuring-vite} | Vite中文网

 1.在vite.config.ts添加server.proxy代理

 

server: {
        proxy: {
            '/api': {
                target: 'https://www.wanandroid.com',
                changeOrigin: true,
                rewrite: (path) => path.replace(/^\/api/, '')
            },
        }
    }

配置后/api就是代理了target配置的地址（ https://www.wanandroid.com）

可以理解为:/api等于https://www.wanandroid.com

所以不需要配置axios的baseUrl了，切记。

2.验证接口

  axios.get("/api/banner/json").then(res => {
    console.log("banner====>",res);
  });

此时，get请求路径不在是https://www.wanandroid.com/banner/json而是/api/banner/json

到此就可以跨域了。

验证：

 拿到数据啦。。。

记~Vite+Vue3+TypeScript + ESlint + CommitLint + Prettier + StyleLin + Element-plus 搭建项目基本框架
小白小白从不日别的博客
06-02 1213
在style下创建scss相关的文件如下图主要看index.less里面的内容// 存放项目统一规范的变量// 自定义的 css 样式// 自定义主题样式// 修改 element-ui 样式修改入门的文件main.ts到这里一个基本的 基于 Vite+Vue3+TypeScript + ESlint + CommitLint + Prettier + StyleLin + Element-plus 的项目框架就搭建完成了。
vue3.0源码解析之数据代理Proxy
qq_22305897的博客
03-05 2253
多年前刚转前端的时候，对频繁的拼接页面元素深恶痛绝，当时是通过封装字符串模版来处理页面的。之后又陆续发现，数据变化后需要频繁的修改dom节点来操作页面，便不得不自己写很多更新的代码，直到出现了vue和react、就转向了框架开发。
Vu3 + Ts + Vite，配置本地代理，生产环境和开发环境
一学就会的小天才
12-05 2097
关于vite下配置不同环境的地址，便于打包部署不同环境
「Vite」Vite4+vue3工程 结合环境变量，配置proxy代理
W-Mo-Mo的博客
08-03 1844
基于vite4+vue3搭建的工程，和后端联调时需要先配置proxy，配置代理的过程中遇到一些问题（比如启动报错、接口访问404等等），弯弯曲曲走了很多坑和弯路！这里我直接贴上解决思路和相关代码了，伙伴们有问题可以直接评论或者私信！
vite配置的vue3项目中vite.config.ts配置的代理没有生效
最新发布
Raoxiaohei的博客
10-11 146
项目情况是封装了axios，同时在里面赋值了axios的baseURL，然后跟后台调试新模块的时候发现要走另外一个服务就在vite.config.ts中配置了一个新的代理，通过简单调试发现axios的baseUrl优先级是高过vite.config.ts中的代理，导致代理没有生效
vite构建的本地开发环境请求第三方接口时如何解决跨域问题
itclanCoder
09-17 1367
前言在vite构建的本地开发环境中，请求第三方接口时如何解决跨域问题呢？本地开发环境,只要请求接口,如果没有做代理配置,都会存在同源策略,跨域的问题,要么在本地做代理,要么在服务器做代理,要么在请求头中设置允许跨域,下面我们来介绍下如何解决vite构建的本地开发环境请求第三方接口时如何解决跨域问题解决方案配置代理在vite.config.js中配置代理,添加server对象,并配置proxy代理,...
vue3+vite（vite.config.ts）配置跨域
weixin_54497063的博客
04-03 1364
最近在写前端的时候想调用一下本地的后端接口，接口地址是8889。所以在前端配置了跨域请求，记录一下。注意：要把localhost换成127.0.0.1。
深入解析 Vue 3 中 Proxy 的响应式实现与跨领域应用
m0_57836225的博客
07-17 2722
而在 Vue3 中，Proxy 的主要用于在 JavaScript 中处理对象的读写操作，它就像一个中介，帮助管理对象的行为。` 在上述配置中，当发送以 `/api` 开头的请求时，会被代理到 `http://e.dxy.net` 这个目标地址，从而解决跨域问题，方便在开发过程中与后端接口进行交互。， 另外，在 Vue 3 的开发中，`vue.config.js` 中的 `devServer.proxy` 配置也使用了 `Proxy` 来实现开发服务器的代理功能，用于解决跨域请求问题。
vue3跨域代理（Vite + TypeScript项目）
weixin_51302020的博客
01-18 753
跨域代理是一种解决前端应用程序跨域请求限制的方法。在浏览器的同源策略下，不允许通过Ajax或Fetch等技术直接发起跨域请求（即请求目标与当前页面的域名、端口或协议不一致）。这就导致了前端无法直接从不同域名下获取数据。为了解决这个问题，可以使用跨域代理来绕过浏览器的同源策略。跨域代理服务器充当中间人的角色，接收前端发起的跨域请求，并将该请求转发到真正的目标服务器，在接收到目标服务器的响应后，再将响应返回给前端。
Vue3 + Vite+ Element-Plus + TypeScript 搭建系统
weixin_45044818的博客
12-04 2096
一种新的专门的编程语言，编译后成正常的CSS文件。为CSS增加一些编程的特性，无需考虑浏览器的兼容问题，让CSS更加简洁，适应性更强，可读性更佳，更易于代码的维护等诸多好处。创建 variables.scss 变量文件，注意规范变量以 $ 开头 @styles/variables.scss。上面导出的scss全局变量在ts不生效的，需要创建一个以.module.scss 结尾的文件。添加scss @styles/normalize.scss。vite导入variables.scss。
【Vite+Vue3+TS】基于Vite+Vue3+TypeScript+ESLint+Prettier+Stylelint搭建项目（亲测超详细）
aDiaoYa_的博客
01-25 3908
结合了很多项目和文章，总结一篇项目构建的笔记。 温馨提示：文章末尾记录了我在搭建项目过程中，遇到的一些问题和解决办法 ~
搭建vite + vue3 + typescript
lemon_javascript的博客
05-01 1960
搭建vite + vue3 + typescript
Vue3的proxy
Z_B_L的博客
12-31 2206
proxy->代理,JavaScript中用来表示由它来’代理’某些操作proxy会在目标对象之前架设一层’拦截’,外界对该对象的访问,都必须先通过这层拦截,因此可以对外界的访问进行过滤和改写。
Vue3.x 中 vue.config 配置 Webpack-dev-server的proxy 实现代理跨域
Jk200165的博客
02-27 2351
前言 如果你有单独的后端开发服务器 API，并且希望在同域名下发送 API 请求 ，那么代理某些 URL 会很有用。 解决开发环境的跨域问题(不用在去配置nginx和host, 爽歪歪~~) 在webpack.config.js中配置 下面简单介绍一下五个经常使用的场景 使用一: module.exports = { //... devServer: { proxy: { '/api': 'http://localhost:3000' } } };
Vue + TypeScript + VueCli3+ 封装 axios 请求 并 解决跨域问题
窝窝头的博客
12-26 6089
一、版本说明 "vue": "^2.6.10", "axios": "^0.19.0", "@vue/cli-plugin-babel": "^4.0.0", "@vue/cli-plugin-router": "^4.0.0", "@vue/cli-plugin-typescript": "^4.0.0", "@vue/cli-plugin-vuex": "^4.0.0", "@vue/cl...
vue3(vite 3.4.0)配置proxy代理实现跨域访问接口
热门推荐
fmd316的博客
02-13 2万+
假设请求路径为 http://127.0.0.1:3000/api/user/info,在axios实例中配置基地址,为/api。这样就能拿到结果了.
vue3中vite代理设置
weixin_44794123的博客
03-29 494
vue3 proxy代理接口配置使用
vite+vue3 proxy配置代理服务器解决本地运行跨域问题
最是人间留不住，朱颜辞镜花辞树。
06-04 1339
是由浏览器的同源策略造成的，是浏览器对JavaScript实施的安全限制，是浏览器的行为。原文链接：https://blog.csdn.net/qq_37656005/article/details/129056780。在打包后，部署后tomcat下，还是会跨域，所以想要彻底解决问题，还是需要后端接口代码加上跨域的相关配置。在本地想请求后端的 一个接口 “http://xxx/test”，proxy配置如下。特别是前后端分离的模式下，由于前后端域名不一致，就会出现跨域问题。// http 是协议。
Vue3 + vite 本地开发配置 proxy
sam的牛栏
06-18 2349
发现脚手架没有像 vue2 + webpack 一样配置 proxy 。而且Vue3 的脚手架使用的是 vite（官方的自然是最好的），那么在 vite 中应该如何配置后端的路由转发呢？
vue3+vite+typescript+electron框架，在electron打包的生产模式下，如何把网络请求本地文件file改成网络ip的同时，解决跨域问题
06-28
<think>我们在Electron+Vue3+Vite+TypeScript项目中，生产模式下需要将本地文件请求改为通过网络IP访问，并解决跨域问题。分析：1.在开发模式下，Vite服务器运行在本地，我们通过HTTP请求访问资源。但在Electron生产模式中，我们通常使用`file://`协议加载本地文件。2.现在需求是：在生产模式下，将文件请求改为通过网络IP访问（即通过HTTP请求而不是文件协议）。这意味着我们需要在Electron应用中启动一个本地服务器来提供这些文件，或者将请求转发到网络上的某个服务器。3.同时，由于网络请求可能会涉及跨域问题，我们需要解决跨域。解决方案：方案一：在Electron主进程中启动一个静态文件服务器，然后让渲染进程通过这个服务器的地址（如http://localhost:port）来访问文件。这样，我们可以控制服务器设置CORS头。方案二：如果文件位于远程服务器，我们可以通过Electron的主进程代理这些请求，或者直接让渲染进程请求远程服务器，并在服务器端设置CORS。但若服务器不在我们控制下，则需要在Electron中处理跨域。根据问题描述，我们是要将原本的本地文件请求（通过`file://`）改为网络IP访问，所以我们可以：步骤1：修改Vue应用中的请求基础路径，使其指向一个网络地址（比如本地启动的服务器）。步骤2：在Electron主进程中，启动一个静态服务器来提供文件服务（或者如果文件在远程，则无需启动，但需要处理跨域）。这里假设我们是要将Electron应用打包后的文件（通常位于`resources/app`或`resources/app.asar`）通过一个本地HTTP服务器来提供。这样，渲染进程就可以通过HTTP请求加载这些资源。具体步骤：1.修改Vite配置，设置基础路径（base）为相对路径（如&#39;./&#39;）或者绝对URL（如果我们知道服务器地址的话）。但在生产打包时，我们通常不知道具体的IP和端口，所以可以在Electron启动时动态确定。2.在Electron主进程中，在生产模式下启动一个本地静态文件服务器（比如使用`express`或`koa`）来提供应用文件（即`app.asar`解压后的内容或直接提供`app.asar`文件？注意：asar文件需要特殊处理，通常需要解压或使用`asar`库读取）。但更简单的方法是：在打包时，我们将静态文件复制到一个目录，然后服务器提供这个目录。3.同时，我们需要修改Electron窗口的加载地址，改为我们本地服务器的地址（如`http://localhost:3000`）。4.关于跨域：如果我们的Vue应用需要请求其他网络资源（不同域名），则需要在服务器上设置CORS头。如果我们的静态服务器和API服务器在同一域名下，则没有跨域问题。如果不在，我们可以：a.在静态服务器中设置CORS头（如果请求的是静态服务器上的资源，则不需要；如果静态服务器需要代理其他API请求，则可以设置）。b.或者，在Electron的主进程中，通过拦截请求并设置响应头来解决跨域（使用`webRequest`模块）。但是，注意：在Electron中，我们可以直接通过设置`webPreferences`中的`webSecurity`为`false`来禁用同源策略（不推荐，因为降低安全性），或者使用`session`来设置CORS头。更安全的做法：在静态服务器中设置CORS头。具体实现：步骤1：在Electron主进程中启动一个静态服务器（以express为例）：-安装express和cors中间件：`npm installexpress cors`-编写服务器代码，设置CORS，并指向我们的静态资源目录（比如`dist`目录，即Vue打包后的目录）。步骤2：修改Electron的窗口加载URL，改为`http://localhost:端口号`。步骤3：在Vite配置中，设置`base`为`&#39;&#39;`（相对路径），这样资源请求会相对于当前URL。步骤4：打包Vue应用到`dist`目录，然后在Electron打包时将这个目录复制到资源目录下。步骤5：在Electron主进程中，根据是否开发模式来决定加载方式：开发模式：直接加载Vite开发服务器地址（如`http://localhost:3000`）生产模式：启动静态服务器（监听某个端口），然后加载`http://localhost:端口号`步骤6：处理跨域请求（如果需要）：在静态服务器中，使用cors中间件：constcors =require(&#39;cors&#39;);app.use(cors());或者，如果请求的是其他服务器，我们可以设置代理（比如使用http-proxy-middleware）。代码示例（主进程）：注意：以下代码需要根据实际情况调整。```typescript//主进程文件main.tsimport{ app, BrowserWindow }from &#39;electron&#39;;import pathfrom &#39;path&#39;;import expressfrom &#39;express&#39;;import corsfrom &#39;cors&#39;; //生产模式标志constisProduction= process.env.NODE_ENV ===&#39;production&#39;; letserver:any =null;//用于保存服务器实例asyncfunction createWindow(){const win= newBrowserWindow({webPreferences: {//其他配置...},});if(!isProduction) {//开发模式：加载Vite开发服务器awaitwin.loadURL(&#39;http://localhost:3000&#39;);win.webContents.openDevTools();}else {//生产模式：启动静态服务器conststaticPath= path.join(__dirname,&#39;dist&#39;); //假设dist目录与主进程文件在同一目录下const appExpress= express();//使用cors中间件允许跨域appExpress.use(cors());//提供静态资源appExpress.use(express.static(staticPath));server =appExpress.listen(0,&#39;localhost&#39;,() =>{constport =(server.address()as any).port;const url= `http://localhost:${port}`;win.loadURL(url);});}} app.whenReady().then(createWindow); app.on(&#39;window-all-closed&#39;, ()=> {if(server) {server.close();}if(process.platform!== &#39;darwin&#39;) {app.quit();} });```注意：上面的静态服务器监听的是随机端口（0表示由系统分配），然后我们获取实际端口并加载。但是，这样每次启动的端口可能不同，如果我们需要固定端口，可以指定一个端口（如3001），但要处理端口占用问题。另外，我们还需要在打包Electron应用时，将Vue的dist目录复制到Electron的资源目录下（具体位置取决于打包工具，如electron-builder或electron-packager）。关于跨域：上面的cors中间件会设置`Access-Control-Allow-Origin: *`，允许所有跨域请求。如果安全性要求高，可以配置具体的域名。替代方案：使用`electron-serve`库（一个用于提供静态文件的简单库），但它不支持CORS设置，需要自己添加中间件，所以还是用express更灵活。步骤7：在Vue应用中，如果有请求其他API的，需要确保这些API服务器设置了CORS，或者通过我们的Express服务器代理（避免跨域）：例如，在Express服务器中添加代理中间件，将特定路径的请求转发到目标服务器。总结：-生产模式下，Electron主进程启动一个Express服务器（带CORS支持）来提供静态文件。-修改窗口加载URL为本地服务器地址。-这样，所有资源请求都通过HTTP，且跨域问题由服务器设置的CORS头解决。注意：在生产环境中，如果我们的应用不需要访问外部网络，只是本地使用，那么跨域问题可能只存在于与本地其他服务的交互，同样可以通过上述方法解决。另外，如果我们的应用需要访问本地文件系统（比如读取用户文件），那么不能通过HTTP请求直接访问，因为HTTP服务器只能提供它指定目录下的文件。这时，对于用户文件的访问，我们可以通过Electron的API（如`ipcRenderer`）来让主进程读取文件，然后返回给渲染进程。因此，我们需要区分两种文件：1.应用自身的静态文件（如HTML、JS、CSS等）：通过本地HTTP服务器提供。2.用户本地文件：通过Electron的IPC机制读取。这样，我们就实现了将本地文件请求改为网络IP访问，并解决了跨域问题。相关问题：1.如何在Electron中设置CORS？2.如何打包Vue3+Vite+TypeScript应用并集成到Electron中？3.在Electron生产模式下，如何动态分配端口启动静态服务器？4.如何通过Express服务器代理API请求以避免跨域？5.如何安全地处理用户本地文件访问？</think>### 在 Electron 生产模式下修改文件请求为网络 IP 访问并解决 CORS 以下是针对 Vue3 + Vite + TypeScript + Electron 应用的解决方案，分步骤实现生产模式下的网络 IP 访问和跨域处理： --- ### 解决方案步骤 #### 1. **修改静态资源加载方式** 在 Electron 生产模式中，将 `file://` 协议改为 `http://` 协议加载资源： ```typescript // main.ts (Electron 主进程) import { app, BrowserWindow } from &#39;electron&#39;; import path from &#39;path&#39;; function createWindow() { const win = new BrowserWindow({ webPreferences: { webSecurity: false, // 禁用同源策略（慎用，需配合其他安全措施） }, }); // 生产模式：通过 HTTP 服务加载 if (app.isPackaged) { win.loadURL(&#39;http://your-server-ip:port&#39;); // 替换为实际 IP 和端口 } // 开发模式：继续使用 Vite 开发服务器 else { win.loadURL(process.env.VITE_DEV_SERVER_URL!); } } ``` #### 2. **配置本地 HTTP 服务器** 使用 Express 启动静态文件服务器： ```bash npm install express cors ``` ```typescript // server.ts (独立 HTTP 服务) import express from &#39;express&#39;; import cors from &#39;cors&#39;; const app = express(); const PORT = 3000; // 解决跨域 app.use(cors({ origin: &#39;*&#39; // 或指定允许的 IP })); // 提供静态文件（指向打包后的 dist 目录） app.use(express.static(path.join(__dirname, &#39;dist&#39;))); app.listen(PORT, &#39;0.0.0.0&#39;, () => { console.log(`Server running at http://your-ip:${PORT}`); }); ``` #### 3. **修改 Vite 配置** 确保资源路径正确 (`vite.config.ts`)： ```typescript export default defineConfig({ base: &#39;./&#39;, // 使用相对路径 build: { outDir: &#39;dist&#39;, assetsDir: &#39;.&#39;, // 资源与入口文件同级 } }); ``` #### 4. **处理 Electron 生产环境路径** 修改资源请求逻辑 (`preload.ts`)： ```typescript // 拦截文件请求转为 HTTP contextBridge.exposeInMainWorld(&#39;api&#39;, { resolvePath: (filePath: string) => { return `http://your-server-ip:port/${path.basename(filePath)}`; } }); // Vue 组件中使用 const pdfUrl = window.api.resolvePath(&#39;documents/report.pdf&#39;); ``` #### 5. **安全加固（关键步骤）** ```typescript // main.ts 中配置 CSP 头 win.webContents.session.webRequest.onHeadersReceived((details, callback) => { callback({ responseHeaders: { ...details.responseHeaders, &#39;Content-Security-Policy&#39;: [ "default-src &#39;self&#39; http://your-server-ip;" ] } }); }); ``` --- ### 跨域问题深度解决 | **方案** | **实现方式** | 适用场景 | |------------------------|-----------------------------------------------------------------------------|-----------------------| | **CORS 中间件** | 在 Express 中使用 `app.use(cors())` | 简单跨域请求 | | **代理转发** | 在服务器端代理 API 请求（避免浏览器直接跨域） | 第三方 API 调用 | | **Electron 协议处理** | 注册自定义协议 `protocol.registerFileProtocol` + 设置 CORS 头 | 本地文件伪装成网络请求 | | **禁用 webSecurity** | `webPreferences: { webSecurity: false }` (仅限可信网络环境) | 临时调试 | --- ### 完整工作流程 1. **打包 Vue 应用**：`vite build` 生成 `dist` 目录 2. **启动 HTTP 服务**：运行 `server.ts` 托管 `dist` 内容 3. **打包 Electron**：使用 electron-builder 打包应用 4. **客户端访问**：Electron 应用加载 `http://ip:port` 而非本地文件 > **安全提示**：生产环境中务必： > - 限制 CORS 的 `origin` 范围 > - 启用 CSP 内容安全策略 > - 避免敏感数据通过 HTTP 明文传输 [^1] ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值