vue解決跨域問題的幾種方式
發(fā)現(xiàn)問題
在使用axios發(fā)送請求之后，沒有得到返回的數(shù)據(jù)，打開控制臺發(fā)現(xiàn)如下圖所示的報(bào)錯(cuò)：
這是提示跨域了。所有使用JavaScript的瀏覽器都會支持同源策略。同源策略即指域名/協(xié)議/端口號相同。只要有一個(gè)不同，就會當(dāng)作跨域請求。
解決方法為：
1. CORS
后端通過 CORS 解決跨域,在響應(yīng)頭中添加:
Access-Control-Allow-Origin: <origin>
前端就可以通過 axios 跨域訪問該后端 API。
2. proxy
在 vue.config.js 中配置 proxy 代理跨域:
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://localhost:8080',
changeOrigin: true
}
}
}
} 這樣前端請求 '/api' 會被代理到 'http://localhost:8080',實(shí)現(xiàn)跨域。
3. JSONP
通過動態(tài)創(chuàng)建 <script> 標(biāo)簽跨域獲取數(shù)據(jù):
function getdata(url, callback) {
var script = document.createElement('script')
script.src = url + '?callback=' + callback
document.body.appendChild(script)
}
getdata('http://example.com/getdata?a=1', 'callback')
function callback(data) {
console.log(data)
}服務(wù)端返回的 JSON 數(shù)據(jù)會作為 callback 函數(shù)的參數(shù),實(shí)現(xiàn)跨域數(shù)據(jù)獲取。
4. postMessage
在跨域的兩個(gè) window 之間通信:
// window1
window.addEventListener('message', function(e) {
console.log(e.data)
}, false)
// window2
var win = otherWindow.window
win.postMessage('message', 'http://example.com')其他方案還有 Web Sockets、nginx 代理等。
總結(jié)一下，解決vue跨域的方法有：
1. 后端通過 CORS 添加響應(yīng)頭
2. Vue CLI proxy 代理跨域
3. JSONP 通過動態(tài) <script> 標(biāo)簽跨域
4. postMessage 跨 window 通信
5. Web Sockets
6. nginx 反向代理
理解跨域問題的原理和常用解決方案對前端工程師來說是非常重要的。
總結(jié)
到此這篇關(guān)于vue解決跨域問題的幾種方式的文章就介紹到這了,更多相關(guān)vue解決跨域問題內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue watch響應(yīng)數(shù)據(jù)實(shí)現(xiàn)方法解析
這篇文章主要介紹了Vue watch響應(yīng)數(shù)據(jù)實(shí)現(xiàn)方法解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-07-07
Vue Draggable實(shí)現(xiàn)拖拽功能的操作方法
vuedraggable 是一個(gè)基于強(qiáng)大的 Sortable.js 庫的 Vue 組件,它允許你通過拖拽的方式對列表進(jìn)行排序、移動、克隆等操作,并且與 Vue 的數(shù)據(jù)響應(yīng)式系統(tǒng)無縫集成,本文介紹Vue Draggable實(shí)現(xiàn)拖拽功能,感興趣的朋友跟隨小編一起看看吧2025-10-10
在Vue項(xiàng)目中使用v-if指令控制ECharts圖表顯示時(shí),可能會遇到圖表無法正常渲染或顯示錯(cuò)誤的問題,下面這篇文章主要介紹了Vue中使用ECharts與v-if的問題和解決方案,需要的朋友可以參考下2024-10-10
vue中defineProperty和Proxy的區(qū)別詳解
這篇文章主要介紹了vue中defineProperty和Proxy的區(qū)別詳解，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
使用vue打包時(shí)vendor文件過大或者是app.js文件很大的問題
這篇文章主要介紹了使用vue打包時(shí)vendor文件過大或者是app.js文件很大問題的解決方法,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-06-06
文章介紹了如何在需求系統(tǒng)中創(chuàng)建一個(gè)位于頁面上方的公告展示組件,展示了如何在App.vue或其他頁面組件中使用這個(gè)公告組件,感興趣的朋友一起看看吧2025-01-01
詳解vue-cli中的ESlint配置文件eslintrc.js
本篇文章主要介紹了vue-cli中的ESlint配置文件eslintrc.js詳解 ，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09
element-plus中el-upload組件限制上傳文件類型的方法
?Element Plus 中,el-upload 組件可以通過設(shè)置 accept 屬性來限制上傳文件的格式,這篇文章主要介紹了element-plus中el-upload組件限制上傳文件類型,需要的朋友可以參考下2024-02-02
vant組件表單外部的button觸發(fā)form表單的submit事件問題
這篇文章主要介紹了vant組件表單外部的button觸發(fā)form表單的submit事件問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
vue2.0+webpack環(huán)境的構(gòu)造過程
本文分步驟給大家介紹了vue2.0+webpack環(huán)境的構(gòu)造過程的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值，需要的朋友可以參考下2016-11-11