打开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. kali linux渗透系统的安装

    Kali 安装详细步骤   实验环境 Windows:Windows 10 企业版 VMware:VMware Workstation 12 Pro Kali:kali-linux-2016.2-am ...

  2. 微信小程序CheckBox选中事件

    1.微信小程CheckBox选中问题 <checkbox-group bindchange="checkboxChange" data-index="{{index ...

  3. 【PHP项目】$_SEVER详解

    $_SERVER['HTTP_ACCEPT_LANGUAGE']//浏览器语言 $_SERVER['REMOTE_ADDR'] //当前用户 IP . $_SERVER['REMOTE_HOST'] ...

  4. yii2 url 美化参数

    所谓的url参数美化就是将冗长的字符串 进行正则替换 yii2 框架的url参数美化完成需要完成两个阶段 第一个阶段分apache和nginx 两种的配置 apache :1.1 必须开启rewrit ...

  5. pdfmake实现中文支持,解决中文乱码问题

    引言:当初自己为了在项目中bootstrap-table中实现导出pdf,使用的pdfmake,但是pdfmake默认使用的不是中文字体,实现pdfmake使用中文字体主要就是编译新的vfs_font ...

  6. hadoop,hbase,hive

    linux上安装hadoop,然后安装hbase,然后安装zookeeper,最后安装hive.hbase安装在hdfs下.hive是纯逻辑表,hbase是物理表.hdfs是hadoop上的一个组件.

  7. 挂个AC自动机

    struct ACM{ ],f[N],cnt[N]; int sz,rt; int ins(char *s){ int n=strlen(s),u=rt; ;i<n;i++){ int c=s[ ...

  8. Hibernate---开发环境搭建

    下载安装Hibernate 在官网http://hibernate.org/tools/上下载eclipse安装插件的文件/安装插件的地址.点击download选择JBoss Tools,选择Arti ...

  9. Java线程---简介

    实现方式 在java中线程有两种实现方式: 1.继承thread类 2.实现runnable接口 Thread类 Thread类时在java.lang包中定义的,继承thread类必须重写run()方 ...

  10. Hihocoder 1275 扫地机器人 计算几何

    题意: 有一个房间的形状是多边形,而且每条边都平行于坐标轴,按顺时针给出多边形的顶点坐标 还有一个正方形的扫地机器人,机器人只可以上下左右移动,不可以旋转 问机器人移动的区域能不能覆盖整个房间 分析: ...