如何使用vue實(shí)現(xiàn)跨域訪問第三方http請(qǐng)求
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/136601242
3、被請(qǐng)求端需要設(shè)置允許跨域
Access-Control-Allow-Origin:*
Access-Control-Allow-Methods:"POST, GET, OPTIONS, DELETE"
Access-Control-Request-Headers: “自己定義的hear,多個(gè)時(shí)用逗號(hào)隔開”
到此這篇關(guān)于使用vue 實(shí)現(xiàn)跨域訪問第三方http請(qǐng)求的文章就介紹到這了,更多相關(guān)vue跨域訪問內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue簡(jiǎn)單實(shí)現(xiàn)購(gòu)物車結(jié)算功能
這篇文章主要為大家詳細(xì)介紹了vue簡(jiǎn)單實(shí)現(xiàn)購(gòu)物車結(jié)算功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-04-04vue項(xiàng)目中使用AvueJs的詳細(xì)教程
Avue.js是基于現(xiàn)有的element-ui庫進(jìn)行的二次封裝,簡(jiǎn)化一些繁瑣的操作,核心理念為數(shù)據(jù)驅(qū)動(dòng)視圖,主要的組件庫針對(duì)table表格和form表單場(chǎng)景,這篇文章給大家介紹了vue項(xiàng)目中使用AvueJs的相關(guān)知識(shí),感興趣的朋友跟隨小編一起看看吧2022-10-10vue-cli?npm如何解決vue項(xiàng)目中缺失core-js的問題
這篇文章主要介紹了vue-cli?npm如何解決vue項(xiàng)目中缺失core-js的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-08-08vue中對(duì)監(jiān)聽esc事件和退出全屏問題的解決方案
這篇文章主要介紹了vue中對(duì)監(jiān)聽esc事件和退出全屏問題的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-08-08vue.js與后臺(tái)數(shù)據(jù)交互的實(shí)例講解
今天小編就為大家分享一篇vue.js與后臺(tái)數(shù)據(jù)交互的實(shí)例講解,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08如何啟動(dòng)一個(gè)Vue.js項(xiàng)目
這篇文章主要介紹了如何啟動(dòng)一個(gè)Vue.js項(xiàng)目,對(duì)Vue.js感興趣的同學(xué),可以參考下2021-04-04