在做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. ubuntu 下 python模块 mysql-python安装(转)

    原文:http://www.cnblogs.com/51kata/p/5406468.html 直接运行如下命令 sudo pip install MySQL-python 报如下错误 xxx@ubu ...

  2. Knowledge Tracing -- 基于贝叶斯的学生知识点追踪(BKT)

    目前,教育领域通过引入人工智能的技术,使得在线的教学系统成为了智能教学系统(ITS),ITS不同与以往的MOOC形式的课程.ITS能够个性化的为学生制定有效的 学习路径,通过根据学生的答题情况追踪学生 ...

  3. 贪心算法:Codevs 1044 拦截导弹

    ---恢复内容开始--- #include <iostream> #include <cstdio> #include <cstdlib> #include < ...

  4. [iOS]Xcode处理过时方法的警告

    ####强迫症的福利, 有的时候, 我们特别讨厌Xcode中的代码警告, 以下就是遇到各种警告的时候的处理方法:(后续会一直更新) 产生警告的原因: 某些方法废弃了, 会产生警告! 样式: 处理方法: ...

  5. ASP.NET批量下载文件

    一.实现步骤 在用户操作界面,由用户选择需要下载的文件,系统根据所选文件,在服务器上创建用于存储所选文件的临时文件夹,将所选文件拷贝至临时文件夹.然后调用 RAR程序,对临时文件夹进行压缩,然后输出到 ...

  6. 20155218 2016-2017-2 《Java程序设计》第7周学习总结

    20155218 2016-2017-2 <Java程序设计>第7周学习总结 教材学习内容总结 就目前来说,即使标注为GMT(无论是文件说明,或者是API的日期时间字符串描述),实际上谈到 ...

  7. opacity设定图片透明度

    实例 1 - 创建透明图像 定义透明效果的 CSS3 属性是 opacity. 首先,我们将展示如何通过 CSS 来创建透明图像. 常规图像: 带有透明度的相同图像: 请看下面的 CSS: img { ...

  8. [BZOJ 2257][JSOI2009]瓶子和燃料 题解(GCD)

    [BZOJ 2257][JSOI2009]瓶子和燃料 Description jyy就一直想着尽快回地球,可惜他飞船的燃料不够了. 有一天他又去向火星人要燃料,这次火星人答应了,要jyy用飞船上的瓶子 ...

  9. CodeForces Contest #1114: Round #538 (Div. 2)

    比赛传送门:CF #1114. 比赛记录:点我. 又 FST 了. [A]Got Any Grapes? 题意简述: 有三个人,第一个人需要吃绿色葡萄至少 \(a\) 个,第二个人需要吃绿色和紫色葡萄 ...

  10. 【Pyhon】获取文件MIME类型,根据文件类型自定义文件后缀

    场景 下载样本,都是MD5命名的无后缀文件,需要自己手动查询然后修改文件后缀. 根据文件类型自定义后缀可以很方便地根据后缀判断用什么工具分析. 使用说明 libmagic 地址:https://pyp ...