vue-cli3.0 axios跨域請求代理配置方式及端口修改
更新時間：2023年10月10日 11:00:16 作者：Stavin Li
這篇文章主要介紹了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)文章
element-ui?el-upload實現(xiàn)上傳文件及簡單的上傳文件格式驗證功能
前端上傳文件后,后端接受文件進行處理后直接返回處理后的文件,前端直接再將文件下載下來,下面這篇文章主要給大家介紹了關(guān)于element-ui?el-upload實現(xiàn)上傳文件及簡單的上傳文件格式驗證功能的相關(guān)資料,需要的朋友可以參考下2022-11-11
Vuejs 實現(xiàn)簡易 todoList 功能 與 組件實例代碼
本文通過實例代碼給大家介紹了Vuejs 實現(xiàn)簡易 todoList 功能 與 組件，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2018-09-09
vuex中的state、getters、mutations、actions之間的關(guān)系解讀
這篇文章主要介紹了vuex中的state、getters、mutations、actions之間的關(guān)系,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了vue返回上一頁面時不刷新問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
vue導(dǎo)出html、word和pdf的實現(xiàn)代碼
這篇文章主要介紹了vue導(dǎo)出html、word和pdf的實現(xiàn)方法，文中完成了三種文件的導(dǎo)出但是還有很多種方法，小編就不給大家一一列舉了,需要的朋友可以參考下2018-07-07
這篇文章主要介紹了Vue如何更改表格中的某一行選項值，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
buildAdmin開源項目引入四種圖標(biāo)方式詳解
這篇文章主要為大家介紹了buildAdmin開源項目引入四種圖標(biāo)方式詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-02-02
組件是Vue.js最強大的功能之一。組件可以擴展HTML元素，封裝可重用的代碼。在較高層面上，組件是自定義元素，Vue.js 的編譯器為它添加特殊功能,需要的朋友可以參考下2023-05-05
Vue.$set 失效的坑 問題發(fā)現(xiàn)及解決方案
這篇文章主要介紹了Vue.$set 失效的坑 問題發(fā)現(xiàn)及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2021-07-07
Vue 中獲取當(dāng)前時間并實時刷新的實現(xiàn)代碼
這篇文章主要介紹了Vue 中獲取當(dāng)前時間并實時刷新,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-05-05