如果我们项目请求的地址为 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. Java11月18日

    动手动脑 实验一: 1. 下边的程序运行结果是什么? 2.你如何解释会得到这样的输出? 3.计算机是不会出错的,之所以得到这样的运行结果也是有原因的那么从这些运行结果中,你能总结出Java的哪些语法特 ...

  2. 点云之OpenMesh:error C1083:无法打开包括文件:“OpenMesh/Core/IO/MeshIO.hh”:No such file or directory

    1.这是一个错误引发的惨案:错误提示如下: 在进行点云程序调试时,出现错误:[error C1083:无法打开包括文件:“OpenMesh/Core/IO/MeshIO.hh”:No such fil ...

  3. OSX 10.14.2 安装Cocoapods 出现问题的解决方法

    今天尝试用 Cocoapods安装个第三方库.. 输入pod install, 发现 command not find. WTF! 估计是升级10.11后Cocoapods被干掉了. 我输入 sudo ...

  4. Chrome常见黑客插件及用法

    目录   0x00  Web Developer(网页开发者) 0x01 Firebug Lite for Google Chrome (Firebug精简版) 0x02 d3coder (decod ...

  5. [NOIp2011] luogu P1311 选择客栈

    我妈的抽象歌曲真 nb. 题目描述 给你 nnn 个点,每个点有两个参数 ci,dic_i,d_ici​,di​,给你一个数 DDD.定义一种方案合法,当且仅当你选出整数 i,j∈[1,n],i< ...

  6. java源码解析

    String深入解析 String具有不变性的原因: String被final修饰,它不可能被继承,也就是任何对String的操作方法,都不会被继承覆写 String中保存数据的是一个char数组的v ...

  7. 造轮子了!NETCore跨平台UI框架,CPF

    CPF(暂时命名)(Cross platform framework),模仿WPF的框架,支持NETCore的跨平台UI框架,暂时不够完善,只用于测试,暂时只支持Windows和Mac.支持数据绑定, ...

  8. 5.Linux文件管理相关命令(下)

    1.文件管理之:联网下载文件(wget.curl).文件上传与下载(rz.sz) 1.wget命令 1.CentOS7 系统最小化安装默认没有wget命令,需要进行安装 [root@oldboyedu ...

  9. SpringBoot-Mysql模板多数据源加载

    SpringBoot-Mysql模板多数据源加载 qq交流群: 812321371 微信交流群: MercyYao 简介 在 java 项目里常用到 mysql 多数据源操作.结合 springboo ...

  10. 工厂模式在mvc模型中的应用

    在web开发中我们常用mvc模式进行web应用的开发 当应用进入service 层的时候我们根据不同的业务多逻辑进行处理 当有数据进入controller的时候 public class Virtua ...