快捷導航

解決vue $http的get和post請求跨域問題

更新時間：2021年06月07日 16:52:09 作者：張超帥

這篇文章主要介紹了解決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("服務(wù)器異常");
            //  });
            //  }
  //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("服務(wù)器異常");
             });
             }
      }

值得注意的是：

1、一定要設(shè)置 {emulateJSON: true},不然跨域不成功.

2、跨域在chrome瀏覽器中你看到的還是http://localhost:8080（即你啟動vue的地址，而不是你服務(wù)器應(yīng)用的地址），所以你看到不要驚訝，其實是跨域成功的。

3、http請求中要帶上/api，經(jīng)過index.js的代理會將/api去掉，瀏覽器中的訪問地址為http://localhost:8080/api/amdatashift/login/user，然后實際的訪問的地址是http://localhost:9080/amdatashift/login/user。通過代理就實現(xiàn)了跨域訪問。

vue el-upload上傳控件一直報跨域問題 post請求變成get請求

最近做vue的上傳，用的是elmentui的el-upload控件，結(jié)果一直出幺蛾子，希望大家少走坑。

不多說截圖上代碼。

1。搬控件改action地址

配置好了后，直接測試，emmm ..... 報錯如下：

提示了跨域問題，這個能理解畢竟我是本機開發(fā)前端服務(wù)和后端服務(wù)端口不一樣。

查找資料，vue跨域問題的解決方案，然后說的開啟代理。

找到vue項目的config中的index.js文件打開，添加如圖中的東西。注意changeOrigin是true。這個意思用/api代替http://192.158.111.101:8000。例子：原地址'http://localhost:8000/ssmShow/upload' 現(xiàn)地址'/api/ssmShow/upload'。

所以上傳控件改為：