Vue中如何实现proxy代理

Vue 框架开发的时候，会遇到跨域的问题，可在config/index.js 里配置proxyTable内容，使用proxy 代理。

// config/index.js 文件
proxyTable: {
   '/api': {
    target: 'http://192.168.149.90:8080/', // 设置你调用的接口域名和端口号
    changeOrigin: true,   // 跨域
    pathRewrite: {
     '^/api': '/'
    }
   }
  },

这里理解成用‘/api'代替target里面的地址，后面组件中我们掉接口时直接用api代替 比如我要调用'http://192.168.149.90:8080/xxx/duty?time=2017-07-07 14:57:22'，直接写‘/api/xxx/duty?time=2017-07-07 14:57:22'即可

在dev.env.js 里配置开发环境请求地址

// config/dev.env.js 文件
module.exports = merge(prodEnv, {
 NODE_ENV: '"development"',
 ADMIN_SERVER: '"/api/"',
});

若请求插件用的 axios，配置如下

const adminServer = axios.create({
 baseURL: process.env.ADMIN_SERVER,
});

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

您可能感兴趣的文章:

  • vue 设置proxyTable参数进行代理跨域
赞 (0)

相关推荐

  • vue 设置proxyTable参数进行代理跨域

    什么是代理跨域 浏览器之间有同源策略,出于安全考虑不同域之间不允许获取数据,除了几个特殊的例子 <img>.<script>.<audio>等标签可以进行跨域但是通常都是以get的形式,如果用js的axios去远程获取的话进会触发同源政策,除非你服务端的代码设置了header同意让你访问,明显这很不合理呀!.现在不是都流行前后端的分离吗,后端代码跑掉了只剩下前端了,两个次元的代码我前端该怎么获取啊,感觉使用跨域好麻烦好难搞啊还不一定搞得到,这个时候就可以用到代理跨域了

  • Vue中如何实现proxy代理

    Vue 框架开发的时候,会遇到跨域的问题,可在config/index.js 里配置proxyTable内容,使用proxy 代理. // config/index.js 文件 proxyTable: { '/api': { target: 'http://192.168.149.90:8080/', // 设置你调用的接口域名和端口号 changeOrigin: true, // 跨域 pathRewrite: { '^/api': '/' } } }, 这里理解成用'/api'代替targe

  • vue中如何配置proxy代理

    目录 vue配置proxy代理 proxy常用参数说明 关于/api的详解 部署因为/api无法请求到数据 总结 vue配置proxy代理 如果你的前端应用和后端 API 服务器没有运行在同一个主机上(即解决跨域问题,用proxy代理请求一下),你需要在开发环境下将 API 请求代理到 API 服务器. 这个问题可以通过 vue.config.js 中的 devServer.proxy 选项来配置. 将 转发到 https://apimusic.linweiqin.com app.vue文件 <

  • nuxt.js服务端渲染中axios和proxy代理的配置操作

    需要npm axios? 刚开始,我以为需要像普通的vue SPA开发那样,需要npm axios,这种方式的确可以生效.但在使用时并不方便.尤其是设置代理比较麻烦,而且在asyncData里与在普通methods里使用方式不一样. 后来在nuxt的github上发现了nuxt是默认集成了axios的,所以不需要npm axios,但是需要进行适当的配置. 以上是百度到的,发现老是报错,现在网上的教程完全是在扯淡,npm axios 是不需要安装了,但是 @nuxtjs/axios 要安装啊 第

  • vue中defineProperty和Proxy的区别详解

    vue中defineProperty和Proxy的区别详解

    Proxy的出现,给vue响应式带来了极大的便利,比如可以直接劫持数组.对象的改变,可以直接添加对象属性,但是兼容性可能会有些问题 Proxy可以劫持的数组的改变,defineProperty 需要变异 defineProperty 中劫持数组变化的变异的方法 可以理解为在数组实例和原型之间,插入了一个新的原型的对象,这个原型方法实现了变异的方法,也就真正地拦截了数组原型上的方法 我们来看下vue2.x的源码 // vue 2.5.0 var arrayProto = Array.prototy

  • 在vue中配置不同的代理同时访问不同的后台操作

    如果和不同的后台调接口,如果后台接口没有合到一起,前端可以配不同的代理来共同访问他们的接口 在config文件夹下的index.js中设置如下: proxyTable: { '/api/login': { // 第一个代理:此处的路径是所有接口前面相同的部分,用来匹配带有这部分路径的 target: "http://192.168.100.209:8910", changeOrigin: true, secure: false }, '/api/supplier': { // 设置第二

  • vue中的proxyTable反向代理(亲测有用)

    vue中的proxyTable反向代理(亲测有用)

    目录 proxyTable反向代理 1.打开vue项目->config->index.js 2.打开一个vue页面 3.npm run dev 反向代理的实现原理 实现原理 程序运行过程 proxyTable反向代理 proxyTable的设置网上有的是,以前也没管过,但新公司的项目需要用到,所以就彻底研究一下,结果绕了好大的弯子! 注:每次设置完proxyTable,请一定要重启,刷新不好使   npm run dev! 开始前,请劳记上面操作,我就在这绕了很大的弯,一直以为页面刷新就行了,

  • vue中proxy代理的用法(解决跨域问题)

    目录 声明 1. 首先我们应该知道 2. 跨域,什么是跨域呢? 问题 跨域的解决方案 代理服务器是如何解决跨域的? proxy配置 以vue cli3.0为例 总结 声明 1. 首先我们应该知道 前端axios在本地发送的请求如果你不把路径写全,它都是会默认加上自己项目所在的端口,就比如说: axios.get('/login') axios.get('/hello') 当我点击发送按钮之后,以上两行代码实际为: http://localhost:8080/login http://localh

  • 实例详解vue中的代理proxy

    目录 问题 复习一下跨域的解决方案 原理 场景 扩展几个常用的devServer配置 扩展几个vue/cli3的配置 问题 我们本地调试一般都是 npm run serve,然后打开 本机ip:8080(localhost:8080)对吧,这时候我们要调接口调试,后端的接口的地址可能在测试环境,也可能是自己电脑的 ip,总之不是你的 lcoalhost:8080,那么你调接口就会产生跨域,那么怎么办呢?就需要proxy出场了 复习一下跨域的解决方案 jsonp cors Node中间件代理(两次

  • 解决vue中使用proxy配置不同端口和ip接口问题

    问题描述: 使用vue-cli创建的项目,开发地址是localhost:8080,由于后台开发不同的模块,导致每个模块请求的ip和端口号不一致 例如:http://192.168.10.22:8081  或者 http://192.168.10.30:9999等 解决问题: 在vue.config.js中配置不同的端口号 module.exports = { publicPath: process.env.NODE_ENV === 'production' ? './' : '/', devSe

随机推荐