npm i axios 下載
import axios from 'axios' 引入
發(fā)送請求axios請求
跨域?違背了同源策略
同源策略規(guī)定了三個東西必須保持一致:協議名、主機名硝桩、端口號
http為協議名???localhast為主機名??8080為端口號钾挟、
1、解決跨域?
1)本辐、Cors(最標準的處理) 不需要前段人員做任何處理?只需要寫服務器的人在服務器里面在返回響應的時候加幾個特殊的響應頭
2)赏酥、Jsonp?最巧妙的解決辦法??借助了script標簽里面的src屬性?在引入外部資的時候不受同源策略限制這個特點辦到的????在開發(fā)中很少用?因為需要前端+后端人員共同完成?而且也只能解決get請求的跨域問題?
3)潮太、代理服務器
代理服務器也是個服務器?它的端口號和我們自身保持一致?兩臺服務器之間的交流不首同源策略限制?即這樣便可解決跨域問題?所以在發(fā)請求的時候端口號也是8080
如何開啟一個代理服務器管搪?
1)虾攻、nginx ?需要掌握一定量的后端儲備知識
2)、vue-cli?更加簡單方便
使用方式一配置代理服務器有兩個不完美的地方:
1更鲁、不能靈活的控制走不走代理服務器
public文件夾相當于8080服務器的根路徑(8080這臺服務器里面有什么就取決于public文件夾里有什么)當請求的資源8080自身有的時候??就不會將這個請求轉發(fā)至5000服務器
2霎箍、不能夠配置多個代理
只能將請求轉發(fā)給5000服務器
使用方式二開啟代理服務器
??‘/api’ 請求前綴??
3、 作用:當本地請求發(fā)送到代理服務器時?代理服務器會來判定?該請求的前綴是不是‘/api’澡为,如果是?則發(fā)送請求(轉發(fā)請求至5000)漂坏,如果不是?則不發(fā)送請求?可以靈活的控制走不走代理服務器(‘/api’不是固定值,可自定義為‘/hah’?等)
例如:如果請求前綴是‘/api’?則發(fā)送請求至“http://localhost:5050”
前綴的攜帶位置:緊跟端口號
如果直接這么請求的話?會導致404錯誤?因為發(fā)送請求到5050服務器的時候攜帶的還是/api/students, 5050服務器有students但是沒有/api/students
解決辦法:
加上這個配置才能保證代理服務器發(fā)送到5050服務器請求時?只發(fā)送了/students?從而拿到數據
ws作用:用于支持websocket
changeOrigin:(用于控制請求頭中host的值)
當changeOrigin:true時媒至,代理服務器會表明自己也是5050服務器
當changeOrigin:false時顶别,代理服務器表明自己是8080服務器
有時候5050服務器會有些限制?所以這個配置項最好設置為true。
ws和changeOrigin這兩項如果不寫的話?默認值也是true(在react中不寫為false)