如果我们项目请求的地址为 htttp://xxxx.com/a/b/c

可以设置代理为:

dev:{ 

assetsSubDirectory: 'static',// 静态资源文件夹

assetsPublicPath: '/',// 发布路径

  proxyTable: { // 代理配置表,在这里可以配置特定的请求代理到对应的API接口 // 例如将'localhost:8080/api/xxx'代理到'www.example.com/api/xxx' // 使用方法:https://vuejs-templates.github.io/webpack/proxy.html
'/a': {
target: htttp://xxxx.com/a',
             // secure: false,  // 如果是https接口,需要配置这个参数

  changeOrigin: true,// 如果接口跨域,需要进行这个参数配置
             pathRewrite: {
'^/a': ''
             }
}
}

}

例如:接口地址原本是 /save/index,但是为了匹配代理地址,在前面加一个 /api,  因此接口地址需要写成这样的即可生效 /api/save/index。

注意: '/api' 为匹配项,target 为被请求的地址,因为在 请求的 url 中加了前缀 '/api',而原本的接口是没有这个前缀的,所以需要通过 pathRewrite 来重写地址,将前缀 '/api' 转为 '/'。如果本身的接口地址就有 '/api' 这种通用前缀,就可以把 pathRewrite 删掉。

项目中常见的:

项目中请求的地址应该为 axios.get('/a/b/c'),代理解析时会在a前面加上" htttp://xxxx.com"变成了" htttp://xxxx.com/a/b/c",
当项目打包上线时,代码里的请求地址不需要改动,因为当线上代码运行时,遇到
axios.get('/a/b/c') ,a前面有个‘/’代表根目录的意思。
所以‘/a/b/c’会被解析为 postname+port+'a/b/c',所以请求地址为 ‘
htttp://xxxx.com/a/b/c’。

vue proxyTable代理 解决开发环境的跨域问题的更多相关文章

  1. Vue-cli proxyTable 解决开发环境的跨域问题

    Vue-cli proxyTable 解决开发环境的跨域问题 proxyTable: { '/list': { target: 'http://api.xxxxxxxx.com', pathRewri ...

  2. 如何实现vue前端跨域,proxyTable解决开发环境前端跨域问题

    在开发环境与后端调试的时候难免会遇到跨域问题,很多人说跨域交给后端解决就好了. 其实不然,前端也有很多方法可以解决跨域,方便也快捷. 常见的有nginx转发.node代理. 在vue项目中常用的是pr ...

  3. Vue proxyTable 解决开发环境的跨域问题

    在 config/index.js 配置文件中,添加 dev: { proxyTable: { '/ssp/withdraw': { target: 'http://dev.home.phiwifi. ...

  4. 转:Vue-cli proxyTable 解决开发环境的跨域问题

    转:http://www.jianshu.com/p/95b2caf7e0da 和后端联调时总是会面对恼人的跨域问题,最近基于Vue开发项目时也遇到了这个问题,两边各自想了一堆办法,查了一堆资料,加了 ...

  5. Vue的学习总结之---Vue项目 前后端分离模式解决开发环境的跨域问题

    原文:https://blog.csdn.net/localhost_1314/article/details/83623526 在前后端分离的web开发中,我们与后台联调时,会遇到跨域的问题. 比如 ...

  6. Vue-cli中的proxyTable解决开发环境的跨域问题

    https://blog.csdn.net/u012149969/article/details/80288126 https://vuejs-templates.github.io/webpack/ ...

  7. nodejs 代理 解决开发环境跨域问题

    前后端分离项目中,会遇到跨域问题.解决方法无非就是jsonp cors等. 本次项目前端不搭node服务,线上用nginx搭站点,nginx转发ajax请求server. 本地开发环境的跨域问题用no ...

  8. vue开发环境配置跨域,一步到位

    本文要实现的是:使用vue-cli搭建的项目在开发时配置跨域,上线后不做任何任何修改,接口也可以访问,前端跨域解决方案 production:产品 生产环境 development:开发 开发环境 1 ...

  9. 解决React前端在开发环境的跨域问题

    在前后端分离的分布式架构中,跨域是一道无法绕过去的门槛,众所周知,生产环境上解决跨域最便捷的方式是使用Nginx来处理,那么,在本地开发环境又该如何处理呢? React框架里处理跨域问题,可以使用ht ...

随机推荐

  1. 手把手带你体验Stream流

    前言 只有光头才能变强. 文本已收录至我的GitHub仓库,欢迎Star:https://github.com/ZhongFuCheng3y/3y 上一篇讲解到了Lambda表达式的使用<最近学 ...

  2. 洛谷 P3745 [六省联考2017]期末考试

    题目描述 有 nnn 位同学,每位同学都参加了全部的 mmm 门课程的期末考试,都在焦急的等待成绩的公布. 第 iii 位同学希望在第 tit_iti​ 天或之前得知所有课程的成绩.如果在第 tit_ ...

  3. 【DP合集】棋盘 chess

    给出一张 n × n 的棋盘,格子有黑有白.现在要在棋盘上放棋子,要求: • 黑格子上不能有棋子 • 每行每列至多只有一枚棋子 你的任务是求出有多少种合法的摆放方案.答案模 109+7109+7 . ...

  4. sql获取各种时间格式的方法

    ),)--月/日/年 ),)--年.月.日 (常用) ),)--日/月/年 ),)--日.月.年 ),)--日-月-年 ),)--日 月 年

  5. Java8新特性之Lambda

    为什么要Lambda Java8应该是目前最大的一次更新了,更新后我们迎来了很多新特性,其中便包括Lambda表达式,函数式编程的思想正式进入Java,让我们看一个经典案例. 例1 按照两个人的年龄排 ...

  6. “零基础”如何快速掌握web前端核心技术?

    前端开发要学的知识内容涉及的会很宽泛,虽然说主要是HTML.CSS和JavaScript这些基础知识点,今天想强调一下,学前端开发除了要学这些基础知识外,学员还要在这之上进行延伸和深入的去学,而且互联 ...

  7. Jenkins基本使用

    Jenkins安装 安装基本上属于傻瓜式安装了 选择安装路径不要包含中文 点击install 找到默认密码 选择插件安装 点击无,然后再选择安装 创建一个管理员 Jenkins配置任务 新建工程 输入 ...

  8. prototype与 _proto__的关系

    prototype与 __ proto__ 都是在这个过程中催生的产物,我们一会儿马上讨论,在这之...做对象即可,那javascript种究竟是通过什么来明确继承关系的呢. 一.构造函数: 构造函数 ...

  9. CSP考场Emacs使用指南[原创]

    前言: 据说,CSP考试,之后不再支持windows了呢. windows用户真得劲! 那用什么系统? Ubuntu上场了 Ubuntu编译指南 进入Ubuntu系统,在你想存的文件夹中新建一个空白文 ...

  10. 在idea中添加try/catch的快捷键

    在idea中添加try/catch的快捷键ctrl+alt+t选中想被try/catch包围的语句,同时按下ctrl+alt+t,出现下图