解决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 的 v-model用法实例
Nov 23 Vue.js
在Vue中使用mockjs代码实例
Nov 25 Vue.js
Vue.js桌面端自定义滚动条组件之美化滚动条VScroll
Dec 01 Vue.js
vue+element_ui上传文件,并传递额外参数操作
Dec 05 Vue.js
vue中如何自定义右键菜单详解
Dec 08 Vue.js
Vue3 实现双盒子定位Overlay的示例
Dec 22 Vue.js
基于Vue3.0开发轻量级手机端弹框组件V3Popup的场景分析
Dec 30 Vue.js
详解Vue2的diff算法
Jan 06 Vue.js
详解Vue.js 可拖放文本框组件的使用
Mar 03 Vue.js
vue实现简单数据双向绑定
Apr 28 Vue.js
解决vue $http的get和post请求跨域问题
Jun 07 Vue.js
VUE之图片Base64编码使用ElementUI组件上传
Apr 09 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+SQL 注入攻击的技术实现以及预防办法
2011/01/27 PHP
深入PHP nl2br()格式化输出的详解
2013/06/05 PHP
php启用zlib压缩文件的配置方法
2013/06/12 PHP
CodeIgniter生成网站sitemap地图的方法
2013/11/13 PHP
php实现通用的从数据库表读取数据到数组的函数实例
2015/03/21 PHP
php实现格式化多行文本为Js可用格式
2015/04/15 PHP
laravel 实现关闭CSRF(全部关闭、部分关闭)
2019/10/21 PHP
PHP读取文件,解决中文乱码UTF-8的方法分析
2020/01/22 PHP
张孝祥JavaScript学习阶段性总结(2)--(X)HTML学习
2007/02/03 Javascript
拥抱模块化的JavaScript
2012/03/07 Javascript
js history对象简单实现返回和前进
2013/10/30 Javascript
一个小例子解释如何来阻止Jquery事件冒泡
2014/07/17 Javascript
js实现的早期滑动门菜单效果代码
2015/08/27 Javascript
JavaScript中三种异步上传文件方式
2016/03/06 Javascript
jquery动态遍历Json对象的属性和值的方法
2016/07/27 Javascript
详解Vue CLI3配置之filenameHashing使用和源码设计使用和源码设计
2018/08/31 Javascript
微信小程序模板消息限制实现无限制主动推送的示例代码
2019/08/27 Javascript
vue项目前端微信JSAPI与外部H5支付相关实现过程及常见问题
2020/04/14 Javascript
Jquery如何使用animation动画效果改变背景色的代码
2020/07/20 jQuery
解决vant-UI库修改样式无效的问题
2020/11/03 Javascript
Vite和Vue CLI的优劣
2021/01/30 Vue.js
[02:06]DOTA2英雄基础教程 暗影萨满
2013/12/16 DOTA
[04:20]DOTA2-DPC中国联赛 正赛 VG vs LBZS 选手采访 1月19日
2021/03/11 DOTA
python实现网页链接提取的方法分享
2014/02/25 Python
Python实现的远程登录windows系统功能示例
2018/06/21 Python
python numpy数组的索引和切片的操作方法
2018/10/20 Python
浅谈python常用程序算法
2019/03/22 Python
Python-copy()与deepcopy()区别详解
2019/07/12 Python
scikit-learn线性回归,多元回归,多项式回归的实现
2019/08/29 Python
Sam’s Club山姆会员商店:沃尔玛旗下高端会员制商店
2017/01/16 全球购物
澳大利亚巧克力花束和礼品网站:Tastebuds
2019/03/15 全球购物
毕业生找工作推荐信
2013/11/21 职场文书
幼儿园教师节活动方案
2014/02/02 职场文书
工作简历自我评价
2015/03/11 职场文书
2015年助残日活动总结
2015/03/27 职场文书
信用卡工作证明范本
2015/06/19 职场文书