打开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. scrapy--doutu

    年轻人都爱斗图,可是有时候斗图的数量比较少.就想办法收藏其他的人图片,然而只要能在doutula网页里爬取图片,是一件很棒的的事,看别人写爬斗图的爬虫程序有点麻烦,自己也来动动手,简单,实用.给大家分 ...

  2. ios 苹果内购订单验证 --- php实现

    验证函数: function appleVerify($receipt_data,$orderId = 0) { /* * 21000 App Store不能读取你提供的JSON对象 * 21002 ...

  3. Linux系统完整安装在虚拟机Mini

    打开VMware Workstation虚拟机,然后如下图一步到位: 此处只是简单的安装Linux系统,要想查看安装后的IP等配置看: https://www.cnblogs.com/gentle-a ...

  4. Django+vue在腾讯云上搭建前后端分离项目

    最近打算用Django+vue搭建一个个人主站,在此记录一下搭建项目的整个过程. 一 开发环境: 腾讯云Centos     7 Python                3.7 Django    ...

  5. 010---Django与Ajax

    预备知识: 什么是Json? 定义:json是一种轻量级的数据交换格式. 如果我们要在不同的编程语言中传递对象,就必须把对象序列化为标准格式,比如XML,但那是以往的时代,现在大多数使用序列化为jso ...

  6. TP-常见错误1

    1.无法加载模块 FILE: D:\wamp64\www\www.test_shop.com\ThinkPHP\Library\Think\Dispatcher.class.php LINE: 178 ...

  7. 关于requestMapping 进行url映射实现小小知识点 以及如何获取请求的url中的参数

    requstMapping 用来处理url映射  可以作用在controller类上  也可以作用在方法上 经常使用的方式  通过接收一种映射关系 @RequestMapping("/del ...

  8. windows下使用Python出现No module named tkinter.ttk

    1. 编辑工具使用Pycharm,windows平台,运行的时候报错误 2. 目前用的是Python2.7版本,对比了一下已有的库,名字不太一样,因此换成Python3.6的测试一下暂时没这个问题了. ...

  9. 编译器错误消息: CS1617: 选项“6”对 /langversion 无效

    编译错误 说明: 在编译向该请求提供服务所需资源的过程中出现错误.请检查下列特定错误详细信息并适当地修改源代码. 编译器错误消息: CS1617: 选项“6”对 /langversion 无效:必须是 ...

  10. 四大VDI客户端 总有一款适合你

    [TechTarget中国原创] 交付虚拟桌面时IT管理员必须要考虑到用户如何访问虚拟桌面,因为这会影响用户体验以及VDI部署最终的成败. IT可以转向简便的HTML5客户端,HTML 5客户端功能丰 ...