Vue跨域请求(反向代理)

本文介绍了一种Vue开发中解决跨域问题的方法——反向代理。利用本地服务器代理跨域请求,通过配置config/index.js文件中的proxyTable属性来实现。这种方式避免了浏览器的同源策略限制。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

跨域 之前我们介绍了cookie的跨域访问。今天发现了另一个跨域的好方法反向代理。

介绍

浏览器对于JavaScript具有同源策略,服务器之间没限制,vue在调试时会自动启用一个本地服务,我们在调用跨域的接口时通过代理即可让本地的服务代理浏览器的请求接口,获取结果再返回给浏览器,这样就实现了跨域。
客户端(请求)->本地服务器->远程接口(响应)->本地服务器->客户端

实现

  • config/index.js 配置文件

proxyTable: {
‘/api’: {
target: ‘http://xxxxxx.com’, // 接口的域名
// secure: false, // 如果是https接口,需要配置这个参数
changeOrigin: true, // 如果接口跨域,需要进行这个参数配置
pathRewrite: {
‘^/api’: ‘’
}
}
},

注意事项

  • 调试时使用
### 处理 Electron-Vite Vue 项目中的请求 #### 配置 Vite 开发服务器代理设置 为了有效处理开发环境下的问题,可以在 `electron.vite.config.mjs` 文件中配置 Vite 的内置代理功能。通过这种方式可以拦截特定路径的请求并将其转发到目标服务器上。 ```javascript // electron.vite.config.mjs export default { server: { port: 1024, hmr: true, proxy: { "/api": { target: "http://localhost:7090", changeOrigin: true, pathRewrite: { "^/api": "" } } } } } ``` 此配置使得所有以 `/api` 开头的请求都会被重定向至指定的目标地址,并且会修改原始URL去除前缀部分[^3]。 #### 使用 HTTP Proxy Middleware 插件 对于某些更复杂的场景或者生产环境中无法直接依赖于Vite自带的功能时,则可以通过引入第三方中间件库如 `http-proxy-middleware` 来实现更加灵活可控的反向代理机制。 首先需要安装该模块: ```bash npm install http-proxy-middleware --save-dev ``` 接着在项目的入口文件(通常是 main.js 或者 vite.config.ts 中),定义一个自定义服务端中间件用于处理API调用: ```typescript import { createProxyMiddleware } from 'http-proxy-middleware'; app.use( '/api', createProxyMiddleware({ target: 'http://localhost:7090/', changeOrigin: true, pathRewrite: { '^/api': '' }, }) ); ``` 这种方法允许开发者根据实际需求调整更多参数选项,从而更好地适应不同类型的后端架构和服务部署方式[^4]。 #### 主进程中发起网络请求 考虑到安全性和性能因素,在Electron应用里通常建议由主进程负责执行HTTP请求操作而不是渲染器进程。这样不仅可以减少潜在的安全风险,还能充分利用Node.js强大的IO能力提升效率。 下面是一个简单的例子展示如何利用ipcRenderer API让前端页面触发后台查询动作并将结果返回给视图层显示出来[^2]: ```html <!-- Home.vue --> <template> <div>主页</div> <!-- 显示接收到的数据 --> <ul> <li v-for="val in list" :key="val.id">{{ val.title }}</li> </ul> </template> <script setup> import { ref, onMounted } from 'vue' let list = ref([]) onMounted(() => { // 发送消息给主进程获取数据 window.electron.ipcRenderer.send('get-data') // 接收来自主进程的消息更新列表状态 window.electron.ipcRenderer.on('dataList', (_, data) => { list.value = data; console.log(data); }); }) </script> ``` 以上方法能够有效地帮助解决Electron-Vite与Vue项目中存在的访问难题,同时也遵循了最佳实践原则确保应用程序具备良好的可维护性和扩展性。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值