使用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 ...
随机推荐
- ReactiveX 学习笔记(28)使用 RxJS + React.js 进行 GUI 编程
课题 程序界面由3个文本编辑框和1个文本标签组成. 要求文本标签实时显示3个文本编辑框所输入的数字之和. 文本编辑框输入的不是合法数字时,将其值视为0. 3个文本编辑框的初值分别为1,2,3. 创建工 ...
- Sping4之依赖注入
Spring的依赖注入可以是我们不需要去管理bean,网上看到一个回答很精辟: 现在你需要买一把锤子: 1.自己做一把,解释成java就是,调用者创建被调用着,也就是自己去创造一个造锤子的方法,然后自 ...
- CentOS7 安装phpMyAdmin-4.8.3-all-languages
1 需要先安装好web服务(如nginx).PHP.数据库(如MySQL) 在此略过... wget -O /tmp/phpMyAdmin--all-languages.tar.gz https:// ...
- Python之Unittest和Requests库详解
1.按类来执行 import unittest class f1(unittest.TestCase): def setUp(self): pass def tearDown(self): pass ...
- 网站改版应对google
客户要求修改网站,这会给我们带来问题!为了保留他的网站权重和关键字排名,我们必须在做网站修改工作之前分析他原来网站的连接结构和标题,这样我才能更好地保证他原来网站的整体权重不会有大的变化!以下是我们根 ...
- laravel view not found
在windows开发的laravel项目,部署到Linux服务器找不到视图,代码格式可能是这样的 return view('news\list'); 原因是在Linux下不能识别反斜杠路径,解决办法是 ...
- jmeter连接oracle数据库配置
1导入加载ojdbc.jar包(2种方法) 1)直接拷贝目录 2.
- CentOS7+CDH5.14.0安装CDH错误排查: HiveServer2 该角色的进程已退出。该角色的预期状态为已启动
错误提示: HiveServer2 该角色的进程已退出.该角色的预期状态为已启动 解决办法:出现此问题应该是内存不足造成的,重启相应的组件即可.比如Hive报错,重启Hive,YARN报错,重启YAR ...
- 关于element-ui resetFields
上周换到新项目组,依然是vue,不过是搭配element-ui. 这两天开始用el-form,发现了个问题. 就是我的表单确定提交之后,需要重置表单,一开始我没看熟API,直接将form对象手动赋成初 ...
- LeetCode解题录-51~100
[leetcode]51. N-QueensN皇后 Backtracking Hard [leetcode]52. N-Queens II N皇后 Backtracking Hard [leet ...