解决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自定义插件封装,实现简易的elementUi的Message和MessageBox的示例
Nov 20 Vue.js
解决vue页面刷新,数据丢失的问题
Nov 24 Vue.js
vue3中轻松实现switch功能组件的全过程
Jan 07 Vue.js
Vue中ref和$refs的介绍以及使用方法示例
Jan 11 Vue.js
vue+element table表格实现动态列筛选的示例代码
Jan 14 Vue.js
Vue中引入svg图标的两种方式
Jan 14 Vue.js
vue完美实现el-table列宽自适应
May 08 Vue.js
vue组件的路由高亮问题解决方法
May 11 Vue.js
Vue-Element-Admin集成自己的接口实现登录跳转
Jun 23 Vue.js
vue使用Google Recaptcha验证的实现示例
Aug 23 Vue.js
vue中使用mockjs配置和使用方式
Apr 06 Vue.js
vue代码分块和懒加载非必要资源文件
Apr 11 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判断远程url是否有效的几种方法小结
2011/10/08 PHP
PHP怎么实现网站保存快捷方式方便用户随时浏览
2013/08/15 PHP
php自定义中文字符串截取函数substr_for_gb2312及substr_for_utf8示例
2016/05/28 PHP
Yii CDBCriteria常用方法实例小结
2017/01/19 PHP
Jquery 1.42 checkbox 全选和反选代码
2010/03/27 Javascript
JQuery设置时间段下拉选择实例
2014/12/30 Javascript
数据分析软件之FineReport教程:[5]参数界面JS(全)
2015/08/13 Javascript
JavaScript正则表达式实例详解
2016/10/16 Javascript
原生js实现倒计时功能(多种格式调用)
2017/01/12 Javascript
VUE 使用中踩过的坑
2018/02/08 Javascript
在vue项目中正确使用iconfont的方法
2018/09/28 Javascript
vue组件tabbar使用方法详解
2018/11/06 Javascript
构建一个JavaScript插件系统
2020/10/20 Javascript
JS如何实现在弹出窗口中加载页面
2020/12/03 Javascript
python检测某个变量是否有定义的方法
2015/05/20 Python
Python定时执行之Timer用法示例
2015/05/27 Python
python实现批量监控网站
2016/09/09 Python
Python线程指南详细介绍
2017/01/05 Python
python3获取当前文件的上一级目录实例
2018/04/26 Python
使用Python如何测试InnoDB与MyISAM的读写性能
2018/09/18 Python
python爬取Ajax动态加载网页过程解析
2019/09/05 Python
Python 下载及安装详细步骤
2019/11/04 Python
Python TCP通信客户端服务端代码实例
2019/11/21 Python
Python使用指定字符长度切分数据示例
2019/12/05 Python
利用Python裁切tiff图像且读取tiff,shp文件的实例
2020/03/10 Python
烹饪大赛策划方案
2014/05/26 职场文书
班训口号大全
2014/06/18 职场文书
关于成绩下滑的自我检讨书
2014/09/20 职场文书
2014年师德师风工作总结
2014/11/25 职场文书
承诺书模板大全
2015/05/04 职场文书
2015年物业公司保洁工作总结
2015/10/22 职场文书
学习心得体会
2019/06/20 职场文书
互联网的下一个风口:新的独角兽将诞生
2019/08/02 职场文书
python设置 matplotlib 正确显示中文的四种方式
2021/05/10 Python
浅谈如何提高PHP代码质量之单元测试
2021/05/28 PHP
MySQL 语句执行顺序举例解析
2022/06/05 MySQL