vue-cli3.0 axios跨域請求代理配置方式及端口修改
vue-cli3.0 axios跨域請求代理配置及端口修改
1.安裝 axios
vue add axios
2.項目根目錄下新建 vue.config.js
// vue.config.js
module.exports = {
devServer: {
port: 端口號,
proxy: {
'/apis': {
target: 'https://movie.douban.com/', // target host
ws: true, // proxy websockets
changeOrigin: true, // needed for virtual hosted sites
pathRewrite: {
'^/apis': '' // rewrite path
}
},
}
}
};3. 重啟服務(wù)npm run serve
4. *.vue 文件中請求實例
this.axios.get('/apis/ithil_j/activity/movie_annual2017').then(res => {
console.log(res.data)
}, res => {
console.info('調(diào)用失敗');
})vue-cli3.0解決跨域問題(超簡單)
在根目錄新建文件:vue.config.js

在文件新增內(nèi)容:
module.exports = {
publicPath: '/',
outputDir: 'dist',
devServer: {
open: true,
host: 'localhost',
port: '8081',
proxy: {
'/api': {
target: 'http://localhost:8080', // 要請求的地址
ws: true,
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}
}
};其中,http://localhost:8080是要請求的地址,可根據(jù)自己的需求更換。
這樣配置之后,如果要請求http://localhost:8080/getFile這個url,只需像下面這樣寫ajax請求即可:
this.axios.get('/api/getFile', {//用api代替http://localhost:8080
}).then( response => {
window.console.log("成功" + response)
}).catch(
error => {
window.console.log("失敗"+error)
})總結(jié)
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue.js中methods watch和computed的區(qū)別示例詳解
methods,watch和computed都是以函數(shù)為基礎(chǔ)的,但各自卻都不同,這篇文章主要給大家介紹了關(guān)于vue.js中methods watch和computed區(qū)別的相關(guān)資料,需要的朋友可以參考下2021-08-08
vue watch如何深度監(jiān)聽數(shù)組每一項的變化
這篇文章主要介紹了vue watch如何深度監(jiān)聽數(shù)組每一項的變化問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
Vue.js中關(guān)于偵聽器(watch)的高級用法示例
Vue.js 提供了一個方法 watch,它用于觀察Vue實例上的數(shù)據(jù)變動。下面這篇文章主要給大家介紹了關(guān)于Vue.js中關(guān)于偵聽器(watch)的高級用法的相關(guān)資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2018-05-05
Vue移動端下拉加載更多數(shù)據(jù)onload實現(xiàn)方法淺析
這篇文章主要介紹了Vue移動端下拉加載更多數(shù)據(jù)onload實現(xiàn)方法,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-02-02

