美文网首页
vue axios本地代理接口地址

vue axios本地代理接口地址

作者: 刘金海_ | 来源:发表于2018-12-27 10:59 被阅读13次

先找到配置文件的config.js里面的index.js修改proxyTable的值,修改为:

proxyTable: {

     '/Bapi': {

          target: 'http://40.00.100.100:3002',//设置你调用的接口域名和端口号 别忘了加http

          secure: false,

         changeOrigin: true,

           pathRewrite: {

            '^/Bapi': 'http://40.00.100.100:3002' // 这里理解成用‘/api’代替target里面的地址,后面组件中我们掉接口时直接用api代替 比如我要调用'http://40.00.100.100:3002/user/add',直接写‘/api/user/add’即可

          }

      }

    },

修改完index.js后再修改dev.env.js,修改为:

'use strict'

const merge = require('webpack-merge')

const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {

  BEST_URL:'"/Bapi"',

  NODE_ENV: '"development"'

})

修改完后我们再通过cnpm install --save axios安装插件,接着在src目录下创建server目录,在server目录下建server.js,在server.js里面:

import Axios from 'axios'

export default {

    get(urlStr,resObj) {

        var url = process.env.BEST_URL+urlStr;

        //var url =urlStr;

        return  Axios.get(url, {

                    params: resObj,

                })

    },

post(urlStr,resObj) {

       var url = process.env.BEST_URL+urlStr;

         //var url =urlStr;

        return  Axios.post(url, resObj)

    }

}

然后再mian.js引入:

import Axios from 'axios'

import http from '@/server/server.js'

Vue.prototype.$http=http

最后在各组件间获取数据:

this.$http.post('/xx/xx/xx', {

                          obj:obj(参数)

          }).then(data=> {

            }).catch(error=> {

             console.log(error);

    });

最终请求接口的地址会是:(你的本地ip地址加端口或localhost)/Bapi/xx/xx/xx

相关文章

  • vue axios本地代理接口地址

    先找到配置文件的config.js里面的index.js修改proxyTable的值,修改为: proxyTabl...

  • 学习笔记

    配置 webpack 将接口代理到本地 原作者FungLeo,原文地址。 在Vue-cli的config/inde...

  • vuecliPC项目笔记

    vue-axios跨域使用 在config.index.js设置本地代理 proxyTable: { '/api'...

  • axios 封装、proxyTable代理设置

    axios 封装 设置代理 打包时,设置不同的接口地址 其他 1.axios封装 1.1 全局设置 1.2调用 2...

  • Vue项目api配置nginx反向代理

    vue根目录内vue.config.js axios接口实例 nginx配置 hosts文件将本地IP指向了 ww...

  • 前端跨域之withCredentials

    问题描述:vue 本地开发环境是通过axios直接请求后台,生产环境采用nginx代理;今天本地开发被跨域请求的问...

  • vue项目笔记

    vue-axios跨域使用在config.index.js设置本地代理 在config.dev.env.js设置开...

  • vue 请求配置

    vue项目配置请求接口 const Axios = axios.create({ baseURL: proces...

  • 06-vue设置反向代理

    基于 vue-cli 的反向代理设置及 axios 获取 json 数据 vue-cli 反向代理设置 反向代理用...

  • vue中使用axios调用后端接口

    vue本身不支持ajax接口的请求,所以在vue中经常使用axios这个接口请求工具。axios的官方github...

网友评论

      本文标题:vue axios本地代理接口地址

      本文链接:https://www.haomeiwen.com/subject/cadakqtx.html