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

180 阅读 0 评论 119 点赞

我是靠谱客的博主玩命铃铛，最近开发中收集的这篇文章主要介绍解决vue $http的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'。

所以上传控件改为：