解决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使用vant中的checkbox实现全选功能
Nov 17 Vue.js
vue 通过base64实现图片下载功能
Dec 19 Vue.js
vue 动态生成拓扑图的示例
Jan 03 Vue.js
vue自定义组件实现双向绑定
Jan 13 Vue.js
vue使用过滤器格式化日期
Jan 20 Vue.js
Vue看了就会的8个小技巧
Jan 21 Vue.js
vue.js实现点击图标放大离开时缩小的代码
Jan 27 Vue.js
Vue3 Composition API的使用简介
Mar 29 Vue.js
关于vue中如何监听数组变化
Apr 28 Vue.js
vue基于Teleport实现Modal组件
May 31 Vue.js
使用vue判断当前环境是安卓还是IOS
Apr 12 Vue.js
vue使用localStorage持久性存储实现评论列表
Apr 14 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
phpstrom使用xdebug配置方法
2013/12/17 PHP
thinkphp实现图片上传功能分享
2014/03/04 PHP
thinkphp的dump函数无输出实例代码
2016/11/15 PHP
替换php字符串中的单引号为双引号的方法
2017/02/16 PHP
Smarty模板类内部原理实例分析
2019/07/03 PHP
深入学习微信网址链接解封的防封原理visit_type
2019/08/15 PHP
初学Javascript的一些总结
2008/11/03 Javascript
jquery ajax例子返回值详解
2012/09/11 Javascript
js获取网页高度(详细整理)
2012/12/28 Javascript
一个页面元素appendchild追加到另一个页面元素的问题
2013/01/27 Javascript
jquery 卷帘效果实现代码(不同方向)
2013/02/05 Javascript
jQuery操作元素css样式的三种方法
2014/06/04 Javascript
jQuery简单实现QQ空间点赞已经取消点赞
2015/04/02 Javascript
Jsonp 关键字详解及json和jsonp的区别,ajax和jsonp的区别
2015/12/30 Javascript
express文件上传中间件Multer详解
2016/10/24 Javascript
浅谈js在html中的加载执行顺序,多个jquery ready执行顺序
2016/11/26 Javascript
有关suggest快速删除后仍然出现下拉列表的bug问题
2016/12/02 Javascript
jquery实现文本框的禁用和启用
2016/12/07 Javascript
js实现二级导航功能
2017/03/03 Javascript
js实现本地时间同步功能
2017/08/26 Javascript
原生js实现仿window10系统日历效果的实例
2017/10/31 Javascript
vue 项目地址去掉 #的方法
2018/10/20 Javascript
ES6 迭代器与可迭代对象的实现
2019/02/11 Javascript
javascript异步处理与Jquery deferred对象用法总结
2019/06/04 jQuery
[03:56]DOTA2完美大师赛趣味视频之小鸽子和Mineski打台球
2017/11/24 DOTA
[46:57]EG vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python图片裁剪实例代码(如头像裁剪)
2017/06/21 Python
Python with语句和过程抽取思想
2019/12/23 Python
Django实现将views.py中的数据传递到前端html页面,并展示
2020/03/16 Python
python使用建议与技巧分享(一)
2020/08/17 Python
CHARLES & KEITH台湾官网:新加坡时尚品牌
2019/07/30 全球购物
综合实践活动报告
2015/02/05 职场文书
实习推荐信格式模板
2015/03/27 职场文书
2016学习雷锋精神活动倡议书
2015/04/27 职场文书
Python自动化测试PO模型封装过程详解
2021/06/22 Python
JavaWeb Servlet开发注册页面实例
2022/04/11 Java/Android