vue中配置后端接口服务信息详解

目录
  • vue配置后端接口服务信息
    • 最重要一点
    • 以此接口为例
  • 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服务器的后端服务的，因此就导致请求一直失败。

因此在前后端分离的项目中，前端在请求后端接口时，一定要通过域名进行访问，或者后端的服务器需要能够被外网访问到才可以进行正常的接口访问。

附上如下图示

手画请谅解

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 详解vue配置请求多个服务端解决方案

    一.解决方案 1.1 描述接口context-path 后端的两个接口服务请求前缀,如下: 前缀1: /bryant 前缀2: / 1.2 vue.config.js配置 devServer: { port: 8005, proxy: { // 第一台服务器配置 '/bryant': { target: 'http://localhost:8081, ws: true, changeOrigin: true, pathRewrite: { '^/bryant': '/bryant' } }, /

  • vue接通后端api以及部署到服务器操作

    1.打开项目工程,找到config文件夹下index.js,进行以下修改 dev: { // Paths assetsSubDirectory: 'static', assetsPublicPath: '/', proxyTable: { '/api':{ target: 'http://www.baidu.com',//后端api地址 changeOrigin: true, pathRewrite:{ '^api': '' } } }, 2.然后打开src下App.vue文件配置默认前缀 ex

  • 详解vue配置后台接口方式

    详解vue配置后台接口方式

    在vueAdmin项目中有两种方式配置后端接口的方式,在此做下记录 第一种(代理方式) 在工程目录下 > config > index.js - 修改为如下配置 proxyTable: { '/api': { target: 'http://127.0.0.1:8000', pathRewrite: { '^/api': '' } } }, 在工程目录下 > src > api > user.js - 接口写法 import axios from 'axios' export

  • vue webpack开发访问后台接口全局配置的方法

    在实际开发中,使用vue 后就是前后端分离开发了,这时候我们就需要访问后台的接口来拿到数据,需要URL,name,password来获取到token才能正常使用接口,下面就来配置. 1.找到config文件夹,在prod.env.js中添加一下代码(若没有此JS,自己创建一个就可以了) 'use strict' module.exports = { NODE_ENV: '"production"', API_ROOT: '"//123.116.245.150:18081/ap

  • vue中配置后端接口服务信息详解

    vue中配置后端接口服务信息详解

    目录 vue配置后端接口服务信息 最重要一点 以此接口为例 vue与后端接口是如何进行接口请求的原理 最近遇到一个很奇怪的问题 附上如下图示 vue配置后端接口服务信息 最重要一点 配置完信息后,重新启动服务 npm run dev 需要在config下的index.js中 找到 module.exports = {   dev: {    } } 以此接口为例 dev: {     // Paths     assetsSubDirectory: 'static',     assetsPub

  • 在vue中安装使用vux的教程详解

    最近因为的工作的原因在弄vue,从后端弄到前端之前一直用js,现在第一次接触vue感觉还挺有意思的,就是自己太菜了,这个脑子呀....不太够用.....页面设计用了一个叫vux的东西,vux可以提供一些组件,用起来还是比较方便的,因为自己比较菜吧,所以有很多东西还是不太深入了解...比如对vux自带样式的修改..希望有大牛看到的话也可以多多指点... 今天就记录一下vux的安装使用吧...... 首先自己要先新建一个vue项目,cmd进入到项目目录下,进行安装 1.在项目目录下安装vux(也可以

  • Springboot Vue可配置调度任务实现示例详解

    目录 正文 1.表结构: 2.接口: 3.业务层: 4.Mapper 5.前端(Vue): 正文 Springboot + Vue,定时任务调度的全套实现方案. 这里用了quartz这个框架,实现分布式调度任务很不错,关于quarz的使用方式改天补一篇.相当简单. 1.表结构: sys_job 列名 数据类型 长度 是否可空 是否主键 说明 job_id bigint 否 是 任务ID job_name varchar 64 否 是 任务名称 job_group varchar 64 否 是 任

  • Vue中util的工具函数实例详解

    Vue中util的工具函数,下面通过实例代码给大家介绍的非常详细,具体代码如下所示: // 防抖函数 function debounce (fn, wait) { let t return () => { let context = this let args = arguments if (t) clearTimeout(t) t = setTimeout(() => { fn.apply(context, args) }, wait) } } function flatten (arr)

  • Vue中$router与 $route的区别详解

    Vue中$router与 $route的区别详解

    目录 前言 路由跳转分为编程式和声明式 前言 点击视频讲解更加详细 this.$route:当前激活的路由的信息对象.每个对象都是局部的,可以获取当前路由的 path, name, params, query 等属性. this.$router:全局的 router 实例.通过 vue 根实例中注入 router 实例,然后再注入到每个子组件,从而让整个应用都有路由功能.其中包含了很多属性和对象(比如 history 对象),任何页面也都可以调用其 push(), replace(), go()

  • vue中v-model动态生成的实例详解

    vue中v-model动态生成的实例详解

    vue中v-model动态生成的实例详解 前言: 最近在做公司的项目中,有这么一个需求,每一行有一个input和一个select,其中行数是根据服务器返回的json数据动态变化的.那么问题来了,我们要怎样动态生成v-model? 现在项目做完了就整理了一下,直接贴代码了. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <

  • vue中component组件的props使用详解

    vue中component组件的props使用详解

    本文介绍了 vue中component组件的props使用详解,分享给大家,具体如下: props使用方法 Vue.component('my-component',{ props:['message'], template:'<div class="tem1">{{message}}</div>' }); <my-component message="hello"></my-component> 注意:props 的

  • 对vue中v-if的常见使用方法详解

    使用过Vue的小伙伴一定使用过v-if 这个属性,但是这个属性主要是来干什么的呢,他得用途是那些? 这里我总结了一下,v-if使用一般有两个场景: 1- 多个元素 通过条件判断展示或者隐藏某个元素.或者多个元素 2- 进行两个视图之间的切换 下面我写了两个例子,是Vue官方的简单实例. 第一个实例实现了 type等于不同值,A,B,C 三个元素的展示情况. 第二个例子实现了,点击按钮实现两个视图的切换. <!DOCTYPE html> <html lang="en"&

  • 对vue中methods互相调用的方法详解

    如下所示: 最近在学习vue,并用vue+vue-router+axios+elementUI做了一个pos收银系统的前端页面,但是中间遇到methods里的方法调用问题.本身源码是没有调用的,但是我想直接调用多方便,结果出错了--然后百度了一波,终于解决了~ 分享并做个笔记. delAllOrderList:function(goods) { this.tableData = []; this.totalCount = 0; this.money = 0; }, checkout:functi

  • vue中$refs的用法及作用详解

    一般来讲,获取DOM元素,需document.querySelector(".input1")获取这个dom节点,然后在获取input1的值. 但是用ref绑定之后,我们就不需要在获取dom节点了,直接在上面的input上绑定input1,然后$refs里面调用就行. 然后在javascript里面这样调用:this.$refs.input1 这样就可以减少获取dom节点的消耗了 用法如下: HTML: <div id="app"> <input

随机推荐