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 formD
 
程式設計客棧ata=JSON.stringify(this.ruleForm);
            //      this.$http.get('/api/amdatashift/login/probe').then(function(data){

            //      }).catch(function(){
            //          console.log("伺服器異常");
          xXPBra  //  });
            //  }
  //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/ap程式設計客棧i/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字樣，這不是我的後臺真正地址，這是代理地址，他通過代理就能訪問我的真實地址了 ，所以老哥們別看見埠不對 或者地址路徑不對就認為不對了 這個是對的。

以上為個人經驗，希望能給大家一個參考，也希望大家多多支援我們。