vue axios跨域配置

簡介：

vue2.0之後，就不再對vue-resource更新，而是推薦使用axios。基於 promise 的 http 請求客戶端，可同時在瀏覽器和 node.js 中使用。

功能特性

1、在瀏覽器中傳送 xmlhttprequests 請求

2、在 node.js 中傳送 http請求

3、支援 promise api

4、攔截請求和響應

5、轉換請求和響應資料

6、取消請求

7、自動轉換 json 資料

8、客戶端支援保護安全免受 csrf/xsrf 攻擊

首先需要安裝axios：

$ npm install axios

在main.js檔案裡面引入使用:

$ import axios from 'axios'
$ vue.prototype.$axios = axios

1.什麼是跨域？

例如：a頁面想獲取b頁面資源，如果a、b頁面的協議、網域名稱、埠、子網域名稱不同，所進行的訪問行動都是跨域的，而瀏覽器為了安全問題一般都限制了跨域訪問，也就是不允許跨域請求資源。注意：跨域限制訪問，其實是瀏覽器的限制。

同源策略：是指協議，網域名稱，埠都要相同，其中有乙個不同都會產生跨域；

在vue中使用本地**的方式進行跨域或者使用jquery：

1.首先在main.js中，配置下我們訪問的url字首：

import vue from 'vue'
import router from './router'
import axios from 'axios'
vue.prototype.$axios = axios
axios.defaults.baseurl = '/api'
vue.config.productiontip = false
/* eslint-disable no-new */
new vue(,
template: '
<
/>
'})

關鍵**是：axios.defaults.baseurl = '/api'，這樣每次傳送請求都會帶乙個/api的字首。

2.配置**修改config資料夾下的index.js檔案，在proxytable中加上如下**：

'/api':
}

3.修改url請求:

this.$axios
.get("/unit/querytree")
.then(res => )
.catch(err => );

4.重啟服務就ok原理：因為我們給url加上了字首 /api，我們訪問

/unit/querytree就當於訪問了：假設本地訪問埠號為 18936)

又因為在 index.js 中的 proxytable 中攔截了 /api ,並把 /api 及其前面的所有替換成了 target 中的內容，因此實際訪問 url 是/unit/querytree。

1.公升級到 vue3 後，會發現 vue2 中存放配置的config資料夾沒有了，大家不要慌張。可以在 package.json 檔案的同級目錄下建立vue.config.js檔案。給出該檔案的基礎配置：

module.exports = 
}

vue3 解決跨域，內容只有第二步配置** 和 vue2 不同，其他的一樣。

2.修改 vue.config.js 中devserver子節點內容，新增乙個proxy：

devserver: }},
}

vue axios跨域配置

vue axios跨域問題

Vue axios跨域請求

Vue axios跨域post請求

vue axios跨域配置

vue axios跨域問題

Vue axios跨域請求

Vue axios跨域post請求

相關推薦