打开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. ethereum(以太坊)(八)--Address

    pragma solidity ^0.4.0; contract Test{ address _owner; uint160 _c; constructor() public{ _owner = 0x ...

  2. python的多继承C3(mro)算法

    多继承的继承顺序按照C3算法进行顺序继承 例一 按照深度A类从左往右有三条可继承的"路" 先按照深度优先的算法,将每一路的每一个节点加到列表中 B = [B,D,F,H] C = ...

  3. php 变量的8类类型

    整形,布尔,浮点形,字符串,数组,资源,对象和null php数据类型之查看和判断数据类型 php数据类型之自动转换和强制转换

  4. yii2 url 美化参数

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

  5. iOS常用控件-UITableViewCell

    一. 封装cell: 1.加载xib文件的两种方式 <方式1> (NewsCell是xib文件的名称) NSArray *objects = [[NSBundle mainBundle] ...

  6. linux epoll用法

    epoll 是 linux 特有的 I/O 复用函数.它是把用户关心的文件描述符事件放在内核的一个事件列表中,故而,无须像select和poll一样每次调用都重复传入文件描述符或事件集.但是, epo ...

  7. VIM安装YCM插件

    折腾了两天,终于好了 1.配置VIM (1)下载相关插件 sudo apt-get install git sudo apt-get install build-essential cmake sud ...

  8. 11,flask之--WTForms

    WTForms是什么? 相当于django的ModelForm. 在网页中,为了和用户进行信息交互总是不得不出现一些表单.flask设计了WTForm表单库来使flask可以更加简便地管理操作表单数据 ...

  9. Android Stadio 相关

    这几天,电脑坏了.重装系统,慢慢的学到了很多Android stadio 的相关知识.总结一下吧: 1.gradle 编译工具:在工程的gradle/wrapper/gradle–wrapper.pr ...

  10. Robolectric

    今天学习了单元测试框架,Robolectric.初步感觉,可能我测试的少,没有感觉Robolectric能有多大的帮助.虽然可以帮助创建activity.可以模拟点击事件.可是有什么呢. 好吧,讲下使 ...