欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

解決vue $http的get和post請(qǐng)求跨域問題

 更新時(shí)間:2021年06月07日 16:52:09   作者:張超帥  
這篇文章主要介紹了解決vue $http的get和post請(qǐng)求跨域問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

vue $http的get和post請(qǐng)求跨域問題

首先在config/index.js中配置proxyTable

 proxyTable: {
      '/api':{
          // target:'http://jsonplaceholder.typicode.com',
          target:'http://localhost:9080',
          changeOrigin:true,

           pathRewrite:{
               '/api':''
           }
      }

用戶名和密碼登錄的表單提交

methods: {
// get請(qǐng)求
            //  submitForm() {
            //      var formData=JSON.stringify(this.ruleForm);
            //      this.$http.get('/api/amdatashift/login/probe').then(function(data){

            //      }).catch(function(){
            //          console.log("服務(wù)器異常");
            //  });
            //  }
  //post請(qǐng)求
             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(即你啟動(dòng)vue的地址,而不是你服務(wù)器應(yīng)用的地址),所以你看到不要驚訝,其實(shí)是跨域成功的。

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

vue el-upload上傳控件一直報(bào)跨域問題 post請(qǐng)求變成get請(qǐng)求

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

不多說 截圖上代碼。

1。搬控件改action地址

配置好了后,直接測(cè)試,emmm ..... 報(bào)錯(cuò) 如下:

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

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

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

所以上傳控件改為:

測(cè)試 ;emmmm。。。又錯(cuò)了

還是報(bào)錯(cuò)跨域,而且請(qǐng)求了2次,而且請(qǐng)求有問題啊

文件上傳應(yīng)該還是post請(qǐng)求,結(jié)果這邊一個(gè)get請(qǐng)求 一個(gè)options請(qǐng)求。懵逼。302的狀態(tài)不會(huì)改,先去搞后面這個(gè)500的報(bào)錯(cuò)。

options的請(qǐng)求網(wǎng)上有他的解釋和處理方法 我照著改了(方法是用過濾器截取請(qǐng)求,并修改) 貼代碼 我的是java 后臺(tái)。

添加過濾器。

同時(shí)web.xml需要添加如下

改后重啟java后臺(tái),測(cè)試 emmm。。。如下:

這次厲害了 調(diào)用三次接口了 ,我去。不過好的情況是 options請(qǐng)求已經(jīng)返回正確了,因?yàn)閛ptions請(qǐng)求返回正確了,所以請(qǐng)求了第三次。

仔細(xì)看了下第三次請(qǐng)求,這個(gè)是個(gè)get請(qǐng)求啊。附件上傳怎么就是個(gè)get請(qǐng)求呢。

網(wǎng)上找了很久,大家都說的el-upload這個(gè)控件有問題。不能用action,于是按照網(wǎng)上方法在action里面加個(gè)假的地址,直接在控件的before-upload的鉤子函數(shù)上動(dòng)手腳。

直接在這里面用axios的post請(qǐng)求來提交文件。

繼續(xù)測(cè)試

第三次上傳請(qǐng)求還是個(gè)get請(qǐng)求,這就有問題了,說el-upload中的action有問題就算了 怎么直接調(diào)用post請(qǐng)求,會(huì)直接變成get請(qǐng)求呢。然后找了好久。在一個(gè)老哥的提醒下知道。

js或者vue中當(dāng)有錯(cuò)誤時(shí)候,會(huì)導(dǎo)致post請(qǐng)求變成get請(qǐng)求。然后我就找了我的錯(cuò)誤那就是我的地址。

你說氣不氣,居然只是這個(gè)地方少了斜杠,加上后測(cè)試

一切都好了 ,請(qǐng)求只有一個(gè)了 post還是post了 文件也上傳成功了。雖然很難過 還是很開心。

注意我圖中標(biāo)記的地址,這個(gè)里面端口是8080的 還有api字樣,這不是我的后臺(tái)真正地址,這是代理地址,他通過代理就能訪問我的真實(shí)地址了 ,所以老哥們別看見端口不對(duì) 或者地址路徑不對(duì)就認(rèn)為不對(duì)了 這個(gè)是對(duì)的。

以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。

相關(guān)文章

  • Vue中實(shí)現(xiàn)權(quán)限管理詳解

    Vue中實(shí)現(xiàn)權(quán)限管理詳解

    這篇文章主要介紹了Vue中實(shí)現(xiàn)權(quán)限管理詳解,權(quán)限是對(duì)特定資源的訪問許可,所謂權(quán)限控制,也就是確保用戶只能訪問到被分配的資源,而前端權(quán)限歸根結(jié)底是請(qǐng)求的發(fā)起權(quán),請(qǐng)求的發(fā)起可能有下面兩種形式觸發(fā),需要的朋友可以參考下
    2023-08-08
  • vue前臺(tái)顯示500和405錯(cuò)誤的解決(springboot為后臺(tái))

    vue前臺(tái)顯示500和405錯(cuò)誤的解決(springboot為后臺(tái))

    這篇文章主要介紹了vue前臺(tái)顯示500和405錯(cuò)誤的解決(springboot為后臺(tái)),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-07-07
  • Vue 2.X的狀態(tài)管理vuex記錄詳解

    Vue 2.X的狀態(tài)管理vuex記錄詳解

    這篇文章主要介紹了Vue 2.X的狀態(tài)管理vuex記錄的相關(guān)資料,文中介紹的非常詳細(xì),對(duì)大家的理解和學(xué)習(xí)具有一定的參考價(jià)值,需要的朋友們下面來一起看看吧。
    2017-03-03
  • vue中的render函數(shù)、h()函數(shù)、函數(shù)式組件詳解

    vue中的render函數(shù)、h()函數(shù)、函數(shù)式組件詳解

    在vue中我們使用模板HTML語(yǔ)法來組建頁(yè)面的,使用render函數(shù)我們可以用js語(yǔ)言來構(gòu)建DOM,這篇文章主要介紹了vue中的render函數(shù)、h()函數(shù)、函數(shù)式組件,需要的朋友可以參考下
    2023-02-02
  • vue elementUI table表格數(shù)據(jù) 滾動(dòng)懶加載的實(shí)現(xiàn)方法

    vue elementUI table表格數(shù)據(jù) 滾動(dòng)懶加載的實(shí)現(xiàn)方法

    這篇文章主要介紹了vue elementUI table表格數(shù)據(jù)滾動(dòng)懶加載的實(shí)現(xiàn)方法,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2019-04-04
  • 配置vue全局方法的兩種方式實(shí)例

    配置vue全局方法的兩種方式實(shí)例

    vue項(xiàng)目中有一些方法需要在多個(gè)頁(yè)面調(diào)用,但為了避免在每個(gè)頁(yè)面都import進(jìn)來,可以把方法加到原型上去,這樣在每個(gè)組件中都能使用了,下面這篇文章主要給大家介紹了關(guān)于配置vue全局方法的兩種方式,需要的朋友可以參考下
    2021-09-09
  • vue單元格多列合并的實(shí)現(xiàn)

    vue單元格多列合并的實(shí)現(xiàn)

    這篇文章主要介紹了vue單元格多列合并的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-11-11
  • vue實(shí)現(xiàn)的上拉加載更多數(shù)據(jù)/分頁(yè)功能示例

    vue實(shí)現(xiàn)的上拉加載更多數(shù)據(jù)/分頁(yè)功能示例

    這篇文章主要介紹了vue實(shí)現(xiàn)的上拉加載更多數(shù)據(jù)/分頁(yè)功能,涉及基于vue的事件響應(yīng)、數(shù)據(jù)交互等相關(guān)操作技巧,需要的朋友可以參考下
    2019-05-05
  • 淺析vue-router實(shí)現(xiàn)原理及兩種模式

    淺析vue-router實(shí)現(xiàn)原理及兩種模式

    這篇文章主要介紹了vue-router實(shí)現(xiàn)原理及兩種模式分析,給大家介紹了vue-router hash模式與history模式不同模式下處理邏輯,需要的朋友可以參考下
    2020-02-02
  • 分享幾個(gè)可以助你提高效率的Vue指令

    分享幾個(gè)可以助你提高效率的Vue指令

    vue是一款漸進(jìn)式JavaScript框架,漸進(jìn)式是指由淺到深,由簡(jiǎn)單到復(fù)雜的使用vue框架,下面這篇文章主要給大家分享介紹了幾個(gè)可以助你提高效率的Vue指令,需要的朋友可以參考下
    2022-05-05

最新評(píng)論