在開發(fā)前端頁面時,經(jīng)常需要和后端交互數(shù)據(jù)。使用Vue作為前端框架,對接后端提供的API接口,我們可以使用axios進行請求。但是如果后端API服務(wù)器不在同一個域名下,就會遇到CORS(跨域資源共享)的問題。接下來就來介紹一下Vue中如何使用axios解決CORS的問題。
首先,我們需要使用axios庫,可以通過npm安裝:
npm install axios
接著,在Vue的main.js中引入axios:
import axios from 'axios' Vue.prototype.$http = axios
然后,在組件中使用axios進行請求前,需要設(shè)置一下axios的默認(rèn)配置,允許跨域請求:
Vue.prototype.$http.defaults.headers.common['Access-Control-Allow-Origin'] = '*'
這里需要注意的是,'*'代表允許任何來源的跨域請求,如果想限制來源,可以將'*'替換成具體的來源地址。
最后,就可以正常地使用axios進行跨域請求了,比如:
this.$http.get('http://api.example.com/user') .then(response =>console.log(response.data))
需要注意的是,如果后端API服務(wù)器使用的是https協(xié)議,需要將axios的請求也改成https,否則會出現(xiàn)安全問題。