解决vue $http的get和post请求跨域问题


Posted in Vue.js onJune 07, 2021

vue $http的get和post请求跨域问题

首先在config/index.js中配置proxyTable

proxyTable: {
      '/api':{
          // target:'http://jsonplaceholder.typicode.com',
          target:'http://localhost:9080',
          changeOrigin:true,

           pathRewrite:{
               '/api':''
           }
      }

用户名和密码登录的表单提交

methods: {
// get请求
            //  submitForm() {
            //      var formData=JSON.stringify(this.ruleForm);
            //      this.$http.get('/api/amdatashift/login/probe').then(function(data){

            //      }).catch(function(){
            //          console.log("服务器异常");
            //  });
            //  }
  //post请求
             submitForm() {
                 var formData=JSON.stringify(this.ruleForm);
                 this.$http.post('/api/amdatashift/login/user',{

                     username:this.ruleForm.username,
                     password:this.ruleForm.password
                 },{
                            emulateJSON:true
                        }).then(function(data){
                      console.log(data); 
                 }).catch(function(){
                     console.log("服务器异常");
             });
             }
      }

值得注意的是:

1、一定要设置 {emulateJSON: true},不然跨域不成功.

2、跨域在chrome浏览器中你看到的还是http://localhost:8080(即你启动vue的地址,而不是你服务器应用的地址),所以你看到不要惊讶,其实是跨域成功的。

3、http请求中要带上/api,经过index.js的代理会将/api去掉,浏览器中的访问地址为http://localhost:8080/api/amdatashift/login/user,然后实际的访问的地址是http://localhost:9080/amdatashift/login/user。通过代理就实现了跨域访问。

vue el-upload上传控件一直报跨域问题 post请求变成get请求

最近做vue的上传,用的是elmentui的el-upload控件,结果一直出幺蛾子,希望大家少走坑。

不多说 截图上代码。

1。搬控件改action地址

解决vue $http的get和post请求跨域问题

配置好了后,直接测试,emmm ..... 报错 如下:

解决vue $http的get和post请求跨域问题

提示了跨域问题,这个能理解毕竟我是本机开发前端服务和后端服务端口不一样。

查找资料,vue跨域问题的解决方案,然后说的开启代理。

解决vue $http的get和post请求跨域问题

找到vue项目的config中的index.js文件打开,添加如图中的东西。 注意changeOrigin是true。这个意思用/api代替http://192.158.111.101:8000。例子:原地址'http://localhost:8000/ssmShow/upload' 现地址'/api/ssmShow/upload'。

所以上传控件改为:

解决vue $http的get和post请求跨域问题

测试 ;emmmm。。。又错了

解决vue $http的get和post请求跨域问题

解决vue $http的get和post请求跨域问题

还是报错跨域,而且请求了2次,而且请求有问题啊

文件上传应该还是post请求,结果这边一个get请求 一个options请求。懵逼。302的状态不会改,先去搞后面这个500的报错。

options的请求网上有他的解释和处理方法 我照着改了(方法是用过滤器截取请求,并修改) 贴代码 我的是java 后台。

添加过滤器。

解决vue $http的get和post请求跨域问题

同时web.xml需要添加如下

解决vue $http的get和post请求跨域问题

改后重启java后台,测试 emmm。。。如下:

解决vue $http的get和post请求跨域问题

解决vue $http的get和post请求跨域问题

解决vue $http的get和post请求跨域问题

这次厉害了 调用三次接口了 ,我去。不过好的情况是 options请求已经返回正确了,因为options请求返回正确了,所以请求了第三次。

仔细看了下第三次请求,这个是个get请求啊。附件上传怎么就是个get请求呢。

网上找了很久,大家都说的el-upload这个控件有问题。不能用action,于是按照网上方法在action里面加个假的地址,直接在控件的before-upload的钩子函数上动手脚。

直接在这里面用axios的post请求来提交文件。

解决vue $http的get和post请求跨域问题解决vue $http的get和post请求跨域问题

继续测试

解决vue $http的get和post请求跨域问题

第三次上传请求还是个get请求,这就有问题了,说el-upload中的action有问题就算了 怎么直接调用post请求,会直接变成get请求呢。然后找了好久。在一个老哥的提醒下知道。

js或者vue中当有错误时候,会导致post请求变成get请求。然后我就找了我的错误那就是我的地址。

解决vue $http的get和post请求跨域问题

你说气不气,居然只是这个地方少了斜杠,加上后测试

解决vue $http的get和post请求跨域问题

一切都好了 ,请求只有一个了 post还是post了 文件也上传成功了。虽然很难过 还是很开心。

注意我图中标记的地址,这个里面端口是8080的 还有api字样,这不是我的后台真正地址,这是代理地址,他通过代理就能访问我的真实地址了 ,所以老哥们别看见端口不对 或者地址路径不对就认为不对了 这个是对的。

以上为个人经验,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Vue.js 相关文章推荐
使用vue编写h5公众号跳转小程序的实现代码
Nov 27 Vue.js
vue+element UI实现树形表格
Dec 29 Vue.js
vue3.0中友好使用antdv示例详解
Jan 05 Vue.js
vue watch监控对象的简单方法示例
Jan 07 Vue.js
基于VUE实现简单的学生信息管理系统
Jan 13 Vue.js
vue element el-transfer增加拖拽功能
Jan 15 Vue.js
vue keep-alive的简单总结
Jan 25 Vue.js
Vue提供的三种调试方式你知道吗
Jan 18 Vue.js
如何优化vue打包文件过大
Apr 13 Vue.js
vue组件vue-esign实现电子签名
Apr 21 Vue.js
VUE解决跨域问题Access to XMLHttpRequest at
May 06 Vue.js
Vue深入理解插槽slot的使用
Aug 05 Vue.js
vue Element-ui表格实现树形结构表格
Jun 07 #Vue.js
Vue中foreach数组与js中遍历数组的写法说明
Jun 05 #Vue.js
vue响应式原理与双向数据的深入解析
vue实现水波涟漪效果的点击反馈指令
vue 实现上传组件
May 31 #Vue.js
vue基于Teleport实现Modal组件
Vue+Element UI实现概要小弹窗的全过程
You might like
php 运行效率总结(提示程序速度)
2009/11/26 PHP
PHP7新特性foreach 修改示例介绍
2016/08/26 PHP
laravel通过a标签从视图向控制器实现传值
2019/10/15 PHP
js重写alert控件(适合学习js的新手朋友)
2014/08/24 Javascript
几种经典排序算法的JS实现方法
2016/03/25 Javascript
第二次聊一聊JS require.js模块化工具的基础知识
2016/04/17 Javascript
AngularJS入门教程引导程序
2016/08/18 Javascript
Boostrap实现的登录界面实例代码
2016/10/09 Javascript
jQuery双向列表选择器select版
2016/11/01 Javascript
原生JS实现跑马灯效果
2017/02/20 Javascript
Angular2使用jQuery的方法教程
2017/05/28 jQuery
将angular.js项目整合到.net mvc中的方法详解
2017/06/29 Javascript
vue + element-ui实现简洁的导入导出功能
2017/12/22 Javascript
Vue+Webpack完美整合富文本编辑器TinyMce的方法
2018/11/30 Javascript
JavaScript模板引擎原理与用法详解
2018/12/24 Javascript
微信小程序实现九宫格抽奖
2020/04/15 Javascript
基于layPage插件实现两种分页方式浅析
2019/07/27 Javascript
vue实现div单选多选功能
2020/07/16 Javascript
微信小程序实现下拉加载更多商品
2020/12/29 Javascript
[40:13]Ti4 冒泡赛第二天 iG vs NEWBEE 2
2014/07/15 DOTA
Python脚本实现下载合并SAE日志
2015/02/10 Python
win与linux系统中python requests 安装
2016/12/04 Python
Python iter()函数用法实例分析
2018/03/17 Python
python实现windows壁纸定期更换功能
2019/01/21 Python
Python使用import导入本地脚本及导入模块的技巧总结
2019/08/07 Python
Flask缓存静态文件的具体方法
2020/08/02 Python
Python plt 利用subplot 实现在一张画布同时画多张图
2021/02/26 Python
45个非常奇妙的CSS3 特性应用示例
2012/01/01 HTML / CSS
使用Canvas操作像素的方法
2018/06/14 HTML / CSS
HTML5声音录制/播放功能的实现代码
2018/05/03 HTML / CSS
台湾旅游网站:雄狮旅游网
2017/08/16 全球购物
电气自动化大学生求职信
2013/10/16 职场文书
高中学生会竞选演讲稿
2014/08/25 职场文书
大四优秀党员个人民主评议
2014/09/19 职场文书
2014年质量工作总结
2014/11/22 职场文书
创业计划书之少年玩具店
2019/09/05 职场文书