打开config文件夹下的index.js,配置proxyTable:

{
...
dev:{
... proxyTable: {
'/api': {
target: 'http://localhost',
changeOrigin: true // 必须,为true的话,请求的header将会设置为匹配目标服务器的规则(Access-Control-Allow-Origin)
}
}
}
}

其中,taget是要访问的api的地址,配置完proxyTable后,若要访问'http://localhost/api/books',ajax里的url只需设为'/api/books'即可,webpack会帮你把‘/api’下的请求转发至'http://localhost/api'!

如果不想传递‘/api’ 到请求路径,可以这样配置:

{
...
dev:{
... proxyTable: {
'/api': {
target: 'http://localhost',
changeOrigin: true,
pathRewrite: {"^/api" : ""}
}
}
}
}

参考文档: webpackvue-cli

使用vue-cli开发时跨域问题的更多相关文章

  1. vue dev开发环境跨域和build生产环境跨域问题解决

    dev开发时解决请求跨域问题:config-index.js 配置代理dev: { env: require('./dev.env'), port: 8082, assetsSubDirectory: ...

  2. grunt-connect-proxy解决开发时跨域问题

    最近的项目中前后端是完全分离开发的,前端用grunt管理项目.这样就会导致一个问题:开发时前端调用后台的接口时因为不在一个服务器,所以会出现跨域问题.但是也不能用JSONP或CROS方式实现真正的跨域 ...

  3. vue解决开发时候跨域问题

    vue项目/config/index.js 找到dev对象,增加如下代码 proxyTable: { '/api': { target: 'http://192.168.1.208:8888', ch ...

  4. Vue开发环境跨域访问

    Vue开发环境跨域访问其他服务器或者本机其他端口,需要配置项目中config/index.js文件,修改如下 module.exports = { dev: { // Paths assetsSubD ...

  5. vue.js学习之 跨域请求代理与axios传参

    vue.js学习之 跨域请求代理与axios传参 一:跨域请求代理 1:打开config/index.js module.exports{ dev: { } } 在这里面找到proxyTable{}, ...

  6. Spring Boot Web应用开发 CORS 跨域请求支持:

    Spring Boot Web应用开发 CORS 跨域请求支持: 一.Web开发经常会遇到跨域问题,解决方案有:jsonp,iframe,CORS等等CORS与JSONP相比 1. JSONP只能实现 ...

  7. Vue解决接口访问跨域问题

    随手摘录 Vue解决接口访问跨域问题 1.打开 config -> index.js 2. 找到proxyTable 3.粘贴 如下代码,'https://www.baidu.com'换成要访问 ...

  8. 在Angular.js中的H5页面调用Web api时跨域问题处理

    /// <summary> /// 被请求时 /// 在Angular.js中的H5页面调用Web api时跨域问题处理 /// </summary> /// <para ...

  9. 【坑】前后端分离开发中 跨域问题以及前台不带cookie的问题

    文章目录 前言 跨域问题 cookie问题 拦截器导致的跨域问题 后记 前言 场景一: 前台哒哒哒的点击页面,发送请求,但是后台服务器总是没有回应,后台接口虽打了断点,但是根本进不到断点处: 前端:我 ...

随机推荐

  1. 提高mysql性能(like搜索替换 )

    一 .mysql用find_in_set代替like搜索提高性能 SELECT * from mobantestinfo1 where find_in_set('33',info2); 二 .使用内部 ...

  2. <Docker学习>3. docker镜像命令使用

    镜像提供容器运行时所需要的程序,资源.配置文件等,是一个特殊的文件系统.是容器运行的基础.镜像是多层文件系统组成的,是一个分层存储的架构,在镜像的构建中,会一层层的构建,每一层构建完成就不会发生改变, ...

  3. POJ-3126 BFS,埃式筛选及黑科技

    题目大意:给定两个四位素数a  b,要求把a变换到b,变换的过程要保证  每次变换出来的数都是一个 四位素数,而且当前这步的变换所得的素数  与  前一步得到的素数  只能有一个位不同,而且每步得到的 ...

  4. 第三章:Web表单

    感谢作者 –> 原文链接 本文翻译自 The Flask Mega-Tutorial Part III: Web Forms 这是Flask Mega-Tutorial系列的第三部分,我将告诉你 ...

  5. 笔记-select,poll,epoll

    笔记-select,poll,epoll 1.      I/O多路复用 I/O多路复用是指:通过一种机制或一个进程,可以监视多个文件描述符,一旦描述符就绪(写或读),能够通知程序进行相应的读写操作. ...

  6. URL地址传参中特殊符号的转码和解码

    背景: URL传参在web开发中很常见,一般来说这种方式并不推荐,原因就是浏览器多种多样,各家浏览器对URL地址的解析的表现很不一样,特别是当参数有非ASCII字符.英文字母.阿拉伯数字时. 在CRM ...

  7. 《数据结构与算法分析:C语言描述》复习——第三章“线性表、栈和队列”——双向链表

    2014.06.14 20:17 简介: 双向链表是LRU Cache中要用到的基本结构,每个链表节点左右分别指向上一个和下一个节点,能够自由地左右遍历. 图示: 实现: // My implemen ...

  8. 《Cracking the Coding Interview》——第16章:线程与锁——题目6

    2014-04-27 20:25 题目:关于java中标有synchronized的成员方法? 解法:这代表同一个对象实例的synchronized方法不能被多个线程同时调用.注意有这么多个地方都加粗 ...

  9. android压力测试monkey简单使用

    monkey是android sdk自带的压力测试工具,简单使用如下: 用adb shell进入adb shell环境后,用下面命令进行测试 monkey -p com.xxx.yyy -v num ...

  10. appium-手势密码实现-automationName 是automator2

    上一篇博客已经说了 appium-手势密码实现-automationName 是Appium的情况 下面就说一下automator2的情况: 手势密码的moveTo方法的参数进行了改变. 参数是相对于 ...