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