纯净、安全、绿色的下载网站

首页|软件分类|下载排行|最新软件|IT学院

当前位置:首页IT学院IT技术

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

张超帅   2021-06-07 我要评论
想了解解决vue $http的get和post请求跨域问题的相关内容吗张超帅在本文为您仔细讲解vue get与post请求跨域的相关知识和一些Code实例欢迎阅读和指正我们先划重点:vue,get请求跨域,post请求跨域下面大家一起来学习吧

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地址

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

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

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

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

所以上传控件改为:

测试 emmmm又错了

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

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

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

添加过滤器

同时web.xml需要添加如下

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

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

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

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

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

继续测试

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

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

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

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

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

以上为个人经验希望能给大家一个参考也希望大家多多支持


相关文章

猜您喜欢

  • Python中json.load()和json.loads() Python中json.load()和json.loads()有哪些区别

    想了解Python中json.load()和json.loads()有哪些区别的相关内容吗Captain_Li在本文为您仔细讲解Python中json.load()和json.loads()的相关知识和一些Code实例欢迎阅读和指正我们先划重点:Python,json.load(),Python,json.loads()下面大家一起来学习吧..
  • If选择结构 Java流程控制语句之If选择结构

    想了解Java流程控制语句之If选择结构的相关内容吗工一木子在本文为您仔细讲解If选择结构的相关知识和一些Code实例欢迎阅读和指正我们先划重点:Java流程控制,If选择结构下面大家一起来学习吧..

网友评论

Copyright 2020 www.fresh-weather.com 【世纪下载站】 版权所有 软件发布

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 点此查看联系方式