vue解決跨域問題的幾種方式
發(fā)現(xiàn)問題
在使用axios發(fā)送請求之后，沒有得到返回的數(shù)據(jù)，打開控制臺發(fā)現(xiàn)如下圖所示的報錯：
這是提示跨域了。所有使用JavaScript的瀏覽器都會支持同源策略。同源策略即指域名/協(xié)議/端口號相同。只要有一個不同，就會當(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',實現(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ù),實現(xiàn)跨域數(shù)據(jù)獲取。
4. postMessage
在跨域的兩個 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)文章
淺談vuejs實現(xiàn)數(shù)據(jù)驅(qū)動視圖原理
這篇文章主要介紹了淺談vuejs實現(xiàn)數(shù)據(jù)驅(qū)動視圖原理，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-02-02
這篇文章主要給大家介紹了關(guān)于vue實現(xiàn)移動端table表格簡單方法的相關(guān)資料,使用Vue.js開發(fā)移動應(yīng)用程序時,經(jīng)常需要使用各種UI組件,其中el-table是一個常用的表格組件,可以方便地展示數(shù)據(jù),需要的朋友可以參考下2023-09-09
最近做了一個手機端系統(tǒng)，其中遇到了父頁面需要攜帶參數(shù)跳轉(zhuǎn)至子頁面的問題，現(xiàn)已解決，下面分享一下實現(xiàn)過程，感興趣的朋友一起看看吧2021-04-04
Vue使用$attrs實現(xiàn)爺爺直接向?qū)O組件傳遞數(shù)據(jù)
這篇文章主要為大家詳細介紹了Vue如何使用$attrs實現(xiàn)爺爺直接向?qū)O組件傳遞數(shù)據(jù),文中的示例代碼講解詳細,感興趣的小伙伴可以了解一下2024-02-02
這篇文章主要介紹了vue如何在線預(yù)覽各類型文件問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11
Vue使用Props實現(xiàn)組件數(shù)據(jù)交互的示例代碼
在Vue中,組件的props屬性用于定義組件可以接收的外部數(shù)據(jù),這些數(shù)據(jù)來自父組件并傳遞給子組件,本文給大家介紹了Vue使用Props實現(xiàn)組件數(shù)據(jù)交互,文中有詳細的代碼示例供大家參考,需要的朋友可以參考下2024-06-06
本文主要介紹了vue打包并部署到nginx上的實現(xiàn)示例,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-01-01
今天遇到一個在vue文件中引入本地圖片的問題,于是有了這篇文章,本文主要給大家介紹了關(guān)于前端Vue頁面中展示本地圖片的相關(guān)資料,需要的朋友可以參考下2023-12-12
這篇文章主要介紹了axios在Vue項目中用來向后臺發(fā)送請求（調(diào)接口API），獲取響應(yīng)信息的方法,axios 是一個輕量的 HTTP客戶端，基于 XMLHttpRequest 服務(wù)來執(zhí)行 HTTP 請求，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
Vue子組件關(guān)閉后調(diào)用刷新父組件的實現(xiàn)
這篇文章主要介紹了Vue子組件關(guān)閉后調(diào)用刷新父組件的實現(xiàn)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03