解決vue-axios和vue-resource跨域問題

nanfeiyan 發(fā)布于2019-08-22 14:52 / 3156人閱讀

摘要：個人博客同步文章最近在學習，在中沒有，而是利用和進行數(shù)據(jù)通信。問題在使用的請求時出現(xiàn)跨域問題。這個非常重要，困惑了自己好久設置代理解決跨域問題后注釋掉解決跨域問題同一樣設置代理方法，不過不需要特別聲明中的內(nèi)容了。

個人博客同步文章 https://mr-houzi.com/2018/02/...

最近在學習vue，在vue中沒有ajax，而是利用vue-resource和vue-axios進行數(shù)據(jù)通信。Vue2.0之后，官方推薦使用vue-axios。

問題

在使用vue-axios的post請求時出現(xiàn)跨域問題。報錯如下：

Response to preflight request doesn"t pass access control check:
No "Access-Control-Allow-Origin" header is present on the requested resource.
Origin "http://localhost:8081" is therefore not allowed access. 
The response had HTTP status code 404.

解決步驟

在config/index.js里添加proxyTable代理方法

proxyTable: {
    "/api": {
        target: "http://api.com/",
        changeOrigin: true,
        pathRewrite: {
          "^/api": "/vue"
        }
      }
}

target為目標地址

pathRewrite下為重定向地址(正常情況下為空即可)

完整地址為http://api.com/vue

然后在組件中請求如下：

created(){
    axios.post("/api/Login", {
       data: "data"
    })
    .then(function (response) {
        console.log(response);
    })
    .catch(function (error) {
        console.log(error);
    });
}

結果則是向http://api.com/vue/Login地址發(fā)送請求

特別聲明

設置proxyTable代理方法后，需要注釋掉引入在main.js設置的baseUrl，不然proxyTable無效，依然出現(xiàn)跨域報錯。（這個非常重要，困惑了自己好久）

//main.js
// axios.defaults.baseURL = "http://api.com/";//設置proxyTable代理解決跨域問題后注釋掉baseURL
axios.defaults.headers.common["Authorization"] = AUTH_TOKEN;
axios.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded";

PS:vue-resource解決跨域問題同vue-axios一樣設置proxyTable代理方法，不過不需要特別聲明中的內(nèi)容了。

GPU云服務器云服務器租用idc機房解決的問題和帶來的效益跨域問題跨域解決辦法 cdn跨域問題

文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/92948.html

使用vue-axios和vue-resource解決vue中調(diào)用網(wǎng)易云接口跨域的問題

摘要：使用和解決中調(diào)用網(wǎng)易云接口跨域的問題新建項目新建項目新建項目然后具體設置如下項目名稱項目描述作者回車即可注意這里要安裝和然后和都選擇即可安裝項目依賴安裝模塊安裝模塊運行項目效果圖如下修改頁面內(nèi)容我們先修改一下頁面內(nèi)容調(diào)用網(wǎng)易使用vue-axios和vue-resource解決vue中調(diào)用網(wǎng)易云接口跨域的問題 1. 新建vue項目 1.1 新建項目新建項目 vue init webp...

_ivan 2019-06-28 13:40 評論0 收藏0
關于vue-resource在dev環(huán)境下跨域問題的解決方法

摘要：跨域問題相信跨域問題是每個前端在請求中都會遇到的問題因為瀏覽器的同源策略的限制所以是不支持跨域的當然當后臺在沒有完成搭建的時候這時候我們需要使用到模擬數(shù)據(jù)的時候這時候很多的就會出現(xiàn)跨域問題在中當然這個問題也不例外如下所以在此我也就整理出了跨域問題相信跨域問題是每個前端在ajax請求中都會遇到的問題,因為瀏覽器的同源策略的限制,所以ajax是不支持跨域的,當然當后臺在沒有完成搭建的...

timger 2019-08-20 17:49 評論0 收藏0
axios異步請求數(shù)據(jù)的簡單使用

摘要：使用模擬好后端數(shù)據(jù)之后模擬數(shù)據(jù)的使用參考，就需要嘗試請求加載數(shù)據(jù)了。數(shù)據(jù)請求選擇了，現(xiàn)在都推薦使用。規(guī)定要發(fā)送到服務器的數(shù)據(jù)。布爾值，表示請求是否異步處理。要求為類型的參數(shù)，請求成功后調(diào)用的回調(diào)函數(shù)。在一個中重寫回調(diào)函數(shù)的字符串。使用Mock模擬好后端數(shù)據(jù)之后（Mock模擬數(shù)據(jù)的使用參考：https://segmentfault.com/a/11...），就需要嘗試請求加載數(shù)據(jù)了。數(shù)...

forsigner 2019-08-23 14:40 評論0 收藏0
Vue.js學習

摘要：一基礎學習模式下圖不僅概括了模式，還描述了在中是如何和以及進行交互的。關于這一點我們將在后續(xù)反應系統(tǒng)中討論。父組件通過向下傳遞數(shù)據(jù)給子組件，子組件通過給父組件發(fā)送消息。這個對象必須是普通對象原生對象，及原型屬性會被忽略。 Vue.js 是用于構建交互式的 Web 界面的庫。Vue.js 提供了 MVVM 數(shù)據(jù)綁定和一個可組合的組件系統(tǒng)，具有簡單、靈活的 API。其實和Jquery一樣...

TIGERB 2019-08-21 14:15 評論0 收藏0
《從零構建前后分離的web項目》實戰(zhàn) - 欲善其事必先利其器繼續(xù)打磨前端架構

摘要：工欲善其事必先利其器繼續(xù)打磨前端架構抱歉生病拖更了，快樂本文永久更新地址填坑上回還真的有同學提到了這個問題，感謝細心的你。既實現(xiàn)了攔截又實現(xiàn)了狀態(tài)的共享。愉快的拿到了數(shù)據(jù)這樣，前后分離的項目可以這樣借助測試接口，不需要騷擾任何人。工欲善其事必先利其器 - 繼續(xù)打磨前端架構抱歉生病拖更了，1024快樂本文永久更新地址填坑上回還真的有同學提到了這個問題，感謝細心的你。@_noob...

Mike617 2019-08-23 12:30 評論0 收藏0