axios 基本使用及跨域
安裝使用:
https://axios-http.com/docs/intro
https://www.npmjs.com/package/axios
安裝:
? ? npm install axios
使用:
跨域問題
如果出現(xiàn)跨域問題會(huì)報(bào):
Access to XMLHttpRequest at 'url' form origin 'url2' has been blocked by CORS policy: NO 'Access-Control-Allow-Origin' header is present on the requested resource.
不跨域的要求是:發(fā)起者即客戶端的協(xié)議名、主機(jī)名、端口號(hào)與服務(wù)器三者一致。
發(fā)生跨域后是瀏覽器沒把服務(wù)器返回的數(shù)據(jù)給開發(fā)者,而是直接顯示了上面的錯(cuò)誤信息給開發(fā)者。
1. 解決跨域問題方式一 不靈活:
[NOTE]
====
* proxy 屬性值是后臺(tái)服務(wù)器的根 url
* 在 vue-cli 啟動(dòng)的前端項(xiàng)目中沒有的資源,才會(huì)被轉(zhuǎn)發(fā)到代理服務(wù)器
* 該方式的缺點(diǎn)是只能配置 ##一個(gè)代理##
====
2.?解決跨域問題方式二 好用
[NOTE]
====
pathRewrite:{'^/api':''}? 發(fā)給后端 target 服務(wù)器時(shí)將 'api' 替換為 ''
ws:true 用于支持 websocket
changeOrigin: true/false, Default: false?
* changes the origin of the host header to the target URI
* 設(shè)置為 true,則后臺(tái)服務(wù)器打印 request.host 時(shí),顯示內(nèi)容和服務(wù)器一樣。
====