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

nanfeiyan 發布于2019-08-22 14:52 / 3139人閱讀

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

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

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

問題

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

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地址發送請求

特別聲明

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

//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代理方法，不過不需要特別聲明中的內容了。

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/92948.html

使用vue-axios和vue-resource解決vue中調用網易云接口跨域的問題

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

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

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

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

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

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

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

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

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

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