如何使用vue實(shí)現(xiàn)跨域訪問(wèn)第三方http請(qǐng)求
更新時(shí)間：2024年03月12日 14:14:54 作者：慧香一格
這篇文章主要介紹了如何使用vue實(shí)現(xiàn)跨域訪問(wèn)第三方http請(qǐng)求,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧
1、需要配置vue的攔截器vue.config,js
代碼如下：
const path = require('path')
const url = 'http://127.0.0.1:19043/'
module.exports = {
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
'/aa/bb': { // 前端 包含/aa/bb 的請(qǐng)求就被攔截
target: url, // 攔截后的目標(biāo)url
changeOrigin: true, // 是否跨域 當(dāng)前設(shè)為跨域
// secure: true,
pathRewrite: {
'^/aa/bb': '' // 會(huì)對(duì)匹配到的請(qǐng)求做重寫,
}
}
}
},2、引用 axios
npm install axios
import axios from 'axios';
// 創(chuàng)建axios實(shí)例
const instance = axios.create({
baseURL: 'http://127.0.0.1:19043/aa/bb', // 目標(biāo)服務(wù)器的URL
timeout: 1000, // 請(qǐng)求超時(shí)時(shí)間
headers: {
'Content-Type': 'application/json',
'Custom-Header': 'your-custom-value' // 你想設(shè)置的header
}
});
// 發(fā)送請(qǐng)求
instance.get('/someEndpoint')
.then(response => {
// 處理響應(yīng)
console.log(response.data);
})
.catch(error => {
// 處理錯(cuò)誤
console.error(error);
});
————————————————
版權(quán)聲明：本文為博主原創(chuàng)文章，遵循 CC 4.0 BY-SA 版權(quán)協(xié)議，轉(zhuǎn)載請(qǐng)附上原文出處鏈接和本聲明。
原文鏈接：https://blog.csdn.net/xiaozukun/article/details/1366012423、被請(qǐng)求端需要設(shè)置允許跨域
Access-Control-Allow-Origin：*
Access-Control-Allow-Methods："POST, GET, OPTIONS, DELETE"
Access-Control-Request-Headers: “自己定義的hear，多個(gè)時(shí)用逗號(hào)隔開(kāi)”
到此這篇關(guān)于使用vue 實(shí)現(xiàn)跨域訪問(wèn)第三方http請(qǐng)求的文章就介紹到這了,更多相關(guān)vue跨域訪問(wèn)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue 中 createElement 使用實(shí)例詳解
Vue 提供了createElement 來(lái)創(chuàng)建虛擬dom，方便我們來(lái)函數(shù)化的方式來(lái)定義復(fù)雜的組件結(jié)構(gòu)，這篇文章主要介紹了Vue 中 createElement 使用詳解,需要的朋友可以參考下2022-10-10
這篇文章主要給大家介紹了關(guān)于vue+echarts圖表的基本使用步驟,Echarts是一款基于JavaScript的開(kāi)源可視化圖表庫(kù),而Vue是一種流行的JavaScript框架,用于構(gòu)建用戶界,需要的朋友可以參考下2023-11-11
vue踩坑之在input中使用filters局部過(guò)濾器問(wèn)題
這篇文章主要介紹了vue踩坑之在input中使用filters局部過(guò)濾器問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
vue結(jié)合axios與后端進(jìn)行ajax交互的方法
本篇文章主要介紹了vue結(jié)合axios與后端進(jìn)行ajax交互的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-07-07
vue中eslint導(dǎo)致的報(bào)錯(cuò)問(wèn)題及解決
這篇文章主要介紹了vue中eslint導(dǎo)致的報(bào)錯(cuò)問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
本篇文章主要介紹了vue-router路由的使用詳解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-02-02
Vue組件庫(kù)ElementUI實(shí)現(xiàn)表格列表分頁(yè)效果
這篇文章主要為大家詳細(xì)介紹了Vue組件庫(kù)ElementUI實(shí)現(xiàn)表格列表分頁(yè)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-06-06
這篇文章主要介紹了解讀vue項(xiàng)目防范XSS攻擊問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要介紹了.html頁(yè)面引入vue并使用公共組件方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要介紹了WebPack配置vue多頁(yè)面的方法，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-05-05