vue中配置后端接口服务信息详解
更新时间：2022年03月29日 13:37:43 作者：-柠檬不要羡慕西瓜的甜i
这篇文章主要介绍了vue中配置后端接口服务信息详解，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
vue配置后端接口服务信息
最重要一点
配置完信息后，重新启动服务 npm run dev
需要在config下的index.js中 找到
module.exports = {
dev: {
}
}以此接口为例
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
'/api': {
target: 'http://100.1.1.1:10', //设置你调用的接口域名和端口号 别忘了加http
changeOrigin: true
}
},
}然后在main.js中引入axios npm install axios -d
import axios from 'axios'
Vue.prototype.$http = axios.create({
timeout: 10 * 1000
})然后在vue组件中这样使用：
this.$http.get('/static/data/xxxxx.json')
.then(res => {
console.log(res)
}).catch(err => {
console.log(err)
})vue与后端接口是如何进行接口请求的原理
最近遇到一个很奇怪的问题
前端vue和后端java项目布在同一台服务器（假设该服务器为180服务器），该180服务器无法通过外网访问，前端通过另一台可ping通180服务器和连接外网的服务器（假设为181服务器）进行nginx外网映射访问。此时，我们的设计是希望前端通过内网IP直接对后端接口请求，而不是去走域名进行请求，这样能够在请求时少走一次防火墙，提供接口请求速度。
但是理想很美好，但是现实是最后发现，前端一直无法成功访问到后端接口，一直请求失败。经过多方排查和请教大佬，终于清楚的理解了前后端分离的请求是怎么走的。
其实，在用户在浏览器端进入应用时，他不是直接去服务器访问前端项目，而是通过下载，把前端的项目载入到用户的浏览器中，然后再通过浏览器下载下来的前端vue项目进行请求后端接口的，这时候，如果后端的接口请求改成试用180服务器的ip进行请求，那么外网是无法获取到内网180服务器的后端服务的，因此就导致请求一直失败。
因此在前后端分离的项目中，前端在请求后端接口时，一定要通过域名进行访问，或者后端的服务器需要能够被外网访问到才可以进行正常的接口访问。
附上如下图示
手画请谅解
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue悬浮可拖拽悬浮按钮的实例代码，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-08-08
这篇文章主要介绍了在vue自定义组件中使用 v-model指令详情，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下2022-06-06
vue3使用vue-i18n的方法详解(ts中使用$t, vue3不用this)
所谓的vue-i18n国际化方案就是根据它的规则自己建立一套语言字典,对于每一个字（message）都有一个统一的标识符,下面这篇文章主要给大家介绍了关于vue3使用vue-i18n(ts中使用$t, vue3不用this)的相关资料,需要的朋友可以参考下2022-12-12
el-form组件提供了表单验证的功能,可以通过在el-form上绑定rules属性,并在el-form-item上设置prop属性来进行校验,这篇文章主要给大家介绍了关于el-form组件清除校验提示正确方法(前端技能提升)的相关资料,需要的朋友可以参考下2023-12-12
这篇文章主要介绍了Vue中实现权限管理详解,权限是对特定资源的访问许可，所谓权限控制，也就是确保用户只能访问到被分配的资源,而前端权限归根结底是请求的发起权，请求的发起可能有下面两种形式触发,需要的朋友可以参考下2023-08-08
这篇文章主要介绍了uni-app 开发微信小程序定位,通过使用onLocationChange方法持续监听地址，根据定位精度字段判断是否使用此次定位的经纬度，需要的朋友可以参考下2022-04-04
Vue 3引入了Composition API，这是一套新的API用于编写组件，作为Options API的替代，这篇文章主要介绍了如何优化 Vue.js 应用程序,需要的朋友可以参考下2023-02-02
通过url传递参数是我们在开发中经常用到的一种传参方法，但通过url传递后改如果获取呢？下面这篇文章主要给大家介绍了关于vue如何不通过路由直接获取url中参数的相关资料，需要的朋友可以参考借鉴，下面来一起看看吧。2017-08-08
这篇文章主要介绍了vue实现element上传多张图片浏览删除功能,本文结合示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2023-10-10
本文给大家介绍vue多层弹框时存在遮挡问题，解决思路首先想到的是找到对应的遮挡层的css标签，然后修改z-index值，但是本思路只能解决首次问题，再次打开还会存在相同的问题，故该思路错误，下面给大家带来一种正确的思路，一起看看吧2022-03-03
最新评论