序:写了一个证件打印系统(其实就是一个小demo😳)
vue3+electron 请求使用的axios 😭 ps:就是在请求时出现了问题!!
遇到的问题:在浏览器里面测试请求是没有问题的,使用electron打包后,请求404
百度了一堆只说明了一点:因为我在本地配置了代理,electron解析后的请求路径变成了file:///D:xxx/xxx/这种格式,正常应该是这样的:https://xxx
本地不配置代理又会遇到跨域的错误,所以根据环境做了判断:
import axios from 'axios'
Vue.prototype.$http = axios
Vue.prototype.api = process.env.NODE_ENV == 'development' ? "/api" : "https://xxx/xxx/xxx";
在config文件夹下的index.js做以下配置:
//设置代理
proxyTable: {
'/api': {
target: 'https://xxx/xxx/xxx', // 你请求的第三方接口
changeOrigin: true, // 在本地会创建一个虚拟服务端,然后发送请求的数据,并同时接收请求的数据,这样服务端和服务端进行数据的交互就不会有跨域问题
pathRewrite: { // 路径重写,
'^/api': '' // 替换target中的请求地址,也就是说以后你在请求http://api.douban.com/v2/XXXXX这个地址的时候直接写成/api即可。
}
}
},
请求原来是这么写的:
this.$http.post(
"/api/xxx/xxx", {}, {
headers: {
}
}
).then(res => {
这样写在electron环境下是失效的
改成这样:
this.$http.post(
this.api +
"/xxx/xxx", {}, {
headers: {
}
}
).then(res => {
😀😀问题解决!!
ps:在开发环境下走的是代理模式,打包后直接访问的请求路径。