如何使用vue實現(xiàn)跨域訪問第三方http請求
更新時間:2024年03月12日 14:14:54 作者:慧香一格
這篇文章主要介紹了如何使用vue實現(xiàn)跨域訪問第三方http請求,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧
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 的請求就被攔截
target: url, // 攔截后的目標url
changeOrigin: true, // 是否跨域 當前設為跨域
// secure: true,
pathRewrite: {
'^/aa/bb': '' // 會對匹配到的請求做重寫,
}
}
}
},2、引用 axios
npm install axios
import axios from 'axios';
// 創(chuàng)建axios實例
const instance = axios.create({
baseURL: 'http://127.0.0.1:19043/aa/bb', // 目標服務器的URL
timeout: 1000, // 請求超時時間
headers: {
'Content-Type': 'application/json',
'Custom-Header': 'your-custom-value' // 你想設置的header
}
});
// 發(fā)送請求
instance.get('/someEndpoint')
.then(response => {
// 處理響應
console.log(response.data);
})
.catch(error => {
// 處理錯誤
console.error(error);
});
————————————————
版權(quán)聲明:本文為博主原創(chuàng)文章,遵循 CC 4.0 BY-SA 版權(quán)協(xié)議,轉(zhuǎn)載請附上原文出處鏈接和本聲明。
原文鏈接:https://blog.csdn.net/xiaozukun/article/details/1366012423、被請求端需要設置允許跨域
Access-Control-Allow-Origin:*
Access-Control-Allow-Methods:"POST, GET, OPTIONS, DELETE"
Access-Control-Request-Headers: “自己定義的hear,多個時用逗號隔開”
到此這篇關(guān)于使用vue 實現(xiàn)跨域訪問第三方http請求的文章就介紹到這了,更多相關(guān)vue跨域訪問內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue-cli?npm如何解決vue項目中缺失core-js的問題
這篇文章主要介紹了vue-cli?npm如何解決vue項目中缺失core-js的問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-08-08
vue中對監(jiān)聽esc事件和退出全屏問題的解決方案
這篇文章主要介紹了vue中對監(jiān)聽esc事件和退出全屏問題的解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-08-08

