打开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. php生成微信小程序二维码源码

    目前有3个接口可以生成小程序码,开发者可以根据自己的需要选择合适的接口.第一步:获取   access_token public function getWxAccessToken(){ $appid ...

  2. C# WinForms跨线程更新 UI

    与在Android中一样, 子线程中更新UI被认为是线程不安全的, 会抛出异常. 子线程返回UI线程中更新UI的一个方法为: 1, 捕获应用的UI线程的上下文; 2, 定义线程任务; 3, 定义线程任 ...

  3. spark的排序方法

    今天我们来介绍spark中排序的操作,spark的排序很简单,我们可以直接使用sortBy来进行,这个里面我们使用case clas,使用case class的好处是1.不用newjiukeyi 搞出 ...

  4. cocos2d-x 3.0环境配置(转)

    cocos2d-x 3.0发布有一段时间了,作为一个初学者,我一直觉得cocos2d-x很坑.每个比较大的版本变动,都会有不一样的项目创建方式,每次的跨度都挺大…… 但是凭心而论,3.0RC版本开始 ...

  5. 1082: [SCOI2005]栅栏

    链接 思路 二分+搜索+剪枝. 首先二分一个答案,表示最多可以切出x块.(一个结论:切出的一定是从较小的前x块.如果一个木材可以满足很多个需要的木材,那么切出最小的,就意味着以后再选时的机会更多.) ...

  6. Android ANR详解

    如何避免KeyDispatchTimeout 1:UI线程尽量只做跟UI相关的工作 2:耗时的工作(比如数据库操作,I/O,连接网络或者别的有可能阻碍UI线程的操作)把它放入单独的线程处理 3:尽量用 ...

  7. Android Studio快速的接受一个项目

    1.关键词搜索法,搜索这个词,然后仔细的去找找.肯定可以找到的,虽然可能会有一些奔波. 2.Android device moniter ,可以抓屏幕,看布局,而且可以看到资源id.看到资源id,你说 ...

  8. sql中给逗号分隔的查询结果替换单引号

    技术交流群:233513714 第一种方法: SELECT * FROM pay_inf_config a WHERE a.id IN ( SELECT REPLACE ( concat('''', ...

  9. Hibernate SQL方言

    RDBMS 方言 DB2 org.hibernate.dialect.DB2Dialect DB2 AS/400 org.hibernate.dialect.DB2400Dialect DB2 OS3 ...

  10. 忙着Windows 10迁移?不要忘记Windows 7的安全!

    许多企业已经开始准备向Windows 10迁移了,对于IT管理员来说,Windows 7的安全性不容忽视. 自微软正式停止Windows 7主流支持至今刚刚超过一年,并且其扩展支持将于2010年结束. ...