使用proxyTable解决vue里的跨域问题
由于没有跨域的接口,所以,用8080端口请求8081端口,来模拟跨域。跨域会出现下面报错。

1.找到config文件夹下index.js,在proxyTable对象里复制以下代码:
proxyTable: {
'/apis': {
// 测试环境
target: 'http://localhost:8081', // 接口域名
changeOrigin: true, //是否跨域
pathRewrite: {
'^/apis': '' //需要rewrite重写的,
}
}
},
注意:【更改完这个配置文件后,需要重启项目】
2.使用fetch,vue-resource或axios请求接口
fetch请求:
//用 /apis代替http://localhost:8082
fetch("/apis").then(res=>{
console.log(res);
})
axios请求:
this.$axios.get("/apis").then(res=>{
console.log(res);
})
vue-resource请求:
this.$http.get("/apis").then(res=>{
console.log(res);
});
这样请求,就不会跨域了:

使用proxyTable解决vue里的跨域问题的更多相关文章
- Vue-cli proxyTable 解决开发环境的跨域问题
Vue-cli proxyTable 解决开发环境的跨域问题 proxyTable: { '/list': { target: 'http://api.xxxxxxxx.com', pathRewri ...
- 如何实现vue前端跨域,proxyTable解决开发环境前端跨域问题
在开发环境与后端调试的时候难免会遇到跨域问题,很多人说跨域交给后端解决就好了. 其实不然,前端也有很多方法可以解决跨域,方便也快捷. 常见的有nginx转发.node代理. 在vue项目中常用的是pr ...
- Vue proxyTable 解决开发环境的跨域问题
在 config/index.js 配置文件中,添加 dev: { proxyTable: { '/ssp/withdraw': { target: 'http://dev.home.phiwifi. ...
- 转:Vue-cli proxyTable 解决开发环境的跨域问题
转:http://www.jianshu.com/p/95b2caf7e0da 和后端联调时总是会面对恼人的跨域问题,最近基于Vue开发项目时也遇到了这个问题,两边各自想了一堆办法,查了一堆资料,加了 ...
- 解决vue代理和跨域问题
一.安装vue-resource插件 安装命令:npm install vue-resource --save 安装完之后在根目录下的package.json检查一下插件的版本 在rourer-in ...
- Vue-cli中的proxyTable解决开发环境的跨域问题
https://blog.csdn.net/u012149969/article/details/80288126 https://vuejs-templates.github.io/webpack/ ...
- Vue用axios跨域访问数据
Vue用axios跨域访问数据axios是vue-resource的替代品,vue-resource不再维护.安装axios:npm install axios使用vue-cli开发时,由于项目本身启 ...
- vue开发之跨域请求,请求头not allowed by Access-Control-Allow-Headers,后端cookie session值取不到(二)
原因:你本地的请求ajax的get和post请求:如果你的请求头内放一些可用验证数据Token的时候就会存在跨域请求这是浏览器所不允许的问题: 方案一:后台的接口请求模式都写成jsonp请求,前端去调 ...
- Vue开发环境跨域访问
Vue开发环境跨域访问其他服务器或者本机其他端口,需要配置项目中config/index.js文件,修改如下 module.exports = { dev: { // Paths assetsSubD ...
随机推荐
- JAVA字符串的处理
问题描述: 从键盘数入若干文字,最后输入的一行"end"代表结束标记. 统计该段文字中英文字母的个数 将其中的所有单词the全部改为a,输出结果 将该段文字所有的数字串找出来输出 ...
- docker学习-lnmp+redis之搭建mysql容器服务
一. 前期准备工作,创建配置文件目录,log文件目录,数据库DATA和WEB站点目录[root@T1 ~]# mkdir -p /lnmp/conf/{mysql,nginx,php} /lnmp/l ...
- Linux - Linux 终端命令格式
Linux 终端命令格式 目标 了解终端命令格式 知道如何查阅终端命令帮助信息 01. 终端命令格式 command [-options] [parameter] 说明: command:命令名,相应 ...
- 获取select下拉框选中的的值
有一id=test的下拉框,怎么获取选中的那个值呢? 分别使用javascript方法和jquery方法 <select id="test" name="&quo ...
- 从 PC 卸载 Office
https://support.office.com/zh-cn/article/%E4%BB%8E-PC-%E5%8D%B8%E8%BD%BD-Office-9dd49b83-264a-477a-8 ...
- php 微信自定义分享接口
<?php class JSSDK { private $appId; private $appSecret; public function __construct($appId, $appS ...
- CentOS7 安装VNC
系统环境:CentOS Linux release 7.6.1810Kernel:3.10.0-957.el7.x86_64系统现状:最小化安装,没有安装任何图形支持软件 安装图形化支持 不建议安装G ...
- JS 中常见数组API使用方法(join、concat、slice、splice、reverce)
刚接触前端不久,个人觉得学习程序还是需要经常总结的.下面是我的一些知识的归纳总结,如果哪里说得不对的还请各位大神指点! 1.to str (1)String(arr)将数组中的每个元素转为字符串并用逗 ...
- skynet记录7:服务(c和lua)
稍后填坑 1.c服务的写法(第一个服务logger分析) 2.lua服务的写法(第二个服务bootstrap分析) 3.snlua包装模块
- 【aardio】是否取消三个按键的对话框
import win; var id = win.msgbox("三个按钮","标题",0x3/*_MB_YESNOCANCEL*/) 参考标准库函数: nam ...