在做vue的项目时,用到webpack打包工具,我们会发现本地开发开启的node服务地址请求接口的地址存在跨域问题。本地开启的服务地址是

http://localhost:8080

而服务器的地址是

http://192.168.28.92:9096/api/

如果在你的axios请求中直接写服务器的地址进行请求,就会发生跨域的问题。如下

这就需要webpack中的proxytable代理进行配置,来解决这个跨域的问题。

在config/index.js文件中:

dev: {

    // Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
'/api':{
target: 'http://192.168.28.92:9096',
     // secure: false,// 如果是https接口,需要配置这个参数
changeOrigin: true,//接口跨域,则需要进行这个参数配置
     //pathRewrite: {
     // '^api': '' //如果接口本身没有/api,则需要通过pathRewrite来重写
     //}
}
},
}

当你的服务器接口地址是:

http://120.79.61.208:36912/shop/

此时接口地址中没有/api

则需要通过pathRewrite对接口进行重写

proxyTable: {
'/api':{
target: 'http://192.168.28.92:9096',
     // secure: false,// 如果是https接口,需要配置这个参数
changeOrigin: true,//接口跨域,则需要进行这个参数配置
     pathRewrite: {
      '^api': '' //如果接口本身没有/api,则需要通过pathRewrite来重写
     }
}

则在axios请求中的url:

webpack+vue-cli中代理配置(proxyTable)的更多相关文章

  1. 说下vue工程中代理配置proxy

    这个代理配置不需要后台进行ngnix代理跳转了,前端可以做.在vue.config.js文件中进行配置,如下: module.exports = { publicPath: process.env.V ...

  2. vue cli 中关于vue.config.js中chainWebpack的配置

    Vue CLI  的官方文档上写:调整webpack配置最简单的方式就是在vue.config.js中的configureWebpack选项提供一个对象. Vue CLI 内部的 webpack 配置 ...

  3. Vue Cli 中使用 Karma / Chrome 执行样式相关单元测试

    在 GearCase 开源项目 中,我使用了 Vue Cli 的默认测试框架.因此和样式相关的东西,都无法进行测试.因为它并不类似于无头浏览器,而是存在于虚拟内存之中. 现状 在如下 button.s ...

  4. vue cli中的env详解

    前言 相信使用过 vueCli 开发项目的小伙伴有点郁闷,正常开发时会有三个接口环境(开发,测试,正式),但是 vueCli 只提供了两种 development,production(不包含 tes ...

  5. vue cli 3 lintOnSave 配置有时无效问题

    一个使用vue cli 3.2创建的项目,创建时未开启 lintOnSave,后来希望开启并设置为 lintOnSave: 'error',但配置不生效. 解决方法1:新创建项目(此时vue cli ...

  6. Vue 项目中 ESlint 配置

    前言 对于 ESlint 这一块一直存在一些疑问,今天看到一个文章内容挺好的,这里拿来了. 一.eslint 安装 1.全局安装 npm i -g eslint 全局安装的好处是,在任何项目我们都可以 ...

  7. vue.cli 中使用 less 来写css样式

    vue-cli 的webpack中已配置了less,但 package.json 中没有选项,为了方便开发中使用,需安装一下: 安装方式一: npm install less less-loader ...

  8. vue cli 3.x 配置使用 sourceMap

    项目使用vue cli 3.x搭建,没有了配置文件,如何更方便的查找到对应的scss文件,配置项目支持sourceMap方式? 分二步走: 1.项目根目录(不是src目录,不要搞错了)添加vue.co ...

  9. 手把手教你如何安装使用webpack vue cli

    1.安装node.js:https://nodejs.org/en/download/(看电脑的系统是多少位下载相应版本) 我下载的是Windows Installer(.msi) x64 2.打开c ...

随机推荐

  1. linux开启swap(磁盘缓存)操作

    转载 2014年04月26日 14:41:15 4470 由于工作需要,要帮助同事查看linux服务器的缓存开启情况,经过查找资料,可确定通过以下方法确定Linux磁盘缓存是否已开启. 1.命令行下执 ...

  2. python+正态分布+蒙特卡洛预测男女身高概率!

    sklearn实战-乳腺癌细胞数据挖掘 https://study.163.com/course/introduction.htm?courseId=1005269003&utm_campai ...

  3. javamail插件发送不同类型邮件方式

    一.RFC882文档简单说明 RFC882文档规定了如何编写一封简单的邮件(纯文本邮件),一封简单的邮件包含邮件头和邮件体两个部分,邮件头和邮件体之间使用空行分隔. 邮件头包含的内容有: from字段 ...

  4. 自定义泛型_无多态_通配符无泛型数组_jdk7泛型使用

    通配符 T, K, V, E 等泛型字母为有类型, 类型参数赋予具体的值 ? 未知类型 类型参数赋予不确定值, 任意类型 只能用在 声明类型上,方法参数上, 不能用在定义泛型类上 上限 extends ...

  5. Java SSM框架之MyBatis3(五)MyBatis之ResultMap详解

    resultMap是Mybatis最强大的元素,它可以将查询到的复杂数据(比如查询到几个表中数据)映射到一个结果集当中. resultMap包含的元素: <!--column不做限制,可以为任意 ...

  6. 禁止表单操作及JS控制输入的方式

    <div>表单元素特殊属性<input type="text" value="禁止输入" disabled /></div> ...

  7. 20155232 2016-2017-3 《Java程序设计》第8周学习总结

    20155232 2016-2017-3 <Java程序设计>第8周学习总结 教材学习内容总结 第十四章NIO与NIO2 NIO使用频道来衔接数据结点,在处理数据时,NIO可以让你设定缓冲 ...

  8. Integer中1000==1000为false而100==100为true

    查看Integer.java类,会发现有一个内部私有类,IntegerCache.java,它缓存了从-128到127之间的所有的整数对象.如果在这个区间内,他就会把变量当做一个变量,放到内存中:但如 ...

  9. 一个无锁消息队列引发的血案(五)——RingQueue(中) 休眠的艺术

    目录 (一)起因 (二)混合自旋锁 (三)q3.h 与 RingBuffer (四)RingQueue(上) 自旋锁 (五)RingQueue(中) 休眠的艺术 (六)RingQueue(中) 休眠的 ...

  10. Python_oldboy_自动化运维之路_线程,进程,协程(十一)

    本节内容: 线程 进程 协程 IO多路复用 自定义异步非阻塞的框架 线程和进程的介绍: 举个例子,拿甄嬛传举列线程和进程的关系: 总结:1.工作最小单元是线程,进程说白了就是提供资源的 2.一个应用程 ...