快捷導(dǎo)航

vue-cli3.0 axios跨域請(qǐng)求代理配置方式及端口修改

更新時(shí)間：2023年10月10日 11:00:16 作者：Stavin Li

這篇文章主要介紹了vue-cli3.0 axios跨域請(qǐng)求代理配置方式及端口修改,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

vue-cli3.0 axios跨域請(qǐng)求代理配置及端口修改

1.安裝 axios

vue add axios

2.項(xiàng)目根目錄下新建 vue.config.js

// vue.config.js
module.exports = {
    devServer: {
        port: 端口號(hào),
        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 文件中請(qǐng)求實(shí)例

this.axios.get('/apis/ithil_j/activity/movie_annual2017').then(res => {
	console.log(res.data)
}, res => {
    console.info('調(diào)用失敗');
})

vue-cli3.0解決跨域問(wèn)題（超簡(jiǎn)單）

在根目錄新建文件：vue.config.js

在文件新增內(nèi)容：

module.exports = {
    publicPath: '/',
    outputDir: 'dist',
    devServer: {
        open: true,
        host: 'localhost',
        port: '8081',
        proxy: {
            '/api': {
                target: 'http://localhost:8080', // 要請(qǐng)求的地址
                ws: true,
                changeOrigin: true,
                pathRewrite: {
                    '^/api': ''
                }
            }
        }
    }
};

其中，http://localhost:8080是要請(qǐng)求的地址，可根據(jù)自己的需求更換。

這樣配置之后，如果要請(qǐng)求http://localhost:8080/getFile這個(gè)url，只需像下面這樣寫(xiě)ajax請(qǐng)求即可：

 this.axios.get('/api/getFile', {//用api代替http://localhost:8080
                }).then( response => {
                    window.console.log("成功" + response)
                }).catch(
                error => {
                    window.console.log("失敗"+error)
                })

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(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-cli 3.0 新特性
vue-cli 是 vue 官方團(tuán)隊(duì)推出的一款快速開(kāi)發(fā) vue 項(xiàng)目的構(gòu)建工具，具有開(kāi)箱即用并且提供簡(jiǎn)潔的自定義配置等功能。這篇文章主要介紹了快速了解vue-cli 3.0 新特性,需要的朋友可以參考下
2018-02-02
vue watch如何深度監(jiān)聽(tīng)數(shù)組每一項(xiàng)的變化
這篇文章主要介紹了vue watch如何深度監(jiān)聽(tīng)數(shù)組每一項(xiàng)的變化問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-07-07
vue2實(shí)現(xiàn)封裝動(dòng)態(tài)表單組件
這篇文章主要介紹了vue2實(shí)現(xiàn)封裝動(dòng)態(tài)表單組件，文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下
2022-08-08
Vue生命周期與后端交互實(shí)現(xiàn)流程詳解
Vue的生命周期就是vue實(shí)例從創(chuàng)建到銷(xiāo)毀的全過(guò)程,也就是new Vue()開(kāi)始就是vue生命周期的開(kāi)始。Vue實(shí)例有?個(gè)完整的?命周期,也就是從開(kāi)始創(chuàng)建、初始化數(shù)據(jù)、編譯模版、掛載Dom->渲染、更新->渲染、卸載等?系列過(guò)程,稱(chēng)這是Vue的?命周期
2022-11-11
vue.js如何將echarts封裝為組件一鍵使用詳解
Echarts 、 Remodal和Pikaday是我們?cè)陂_(kāi)發(fā)后臺(tái)管理類(lèi)網(wǎng)站時(shí)常用的三個(gè)第三方組件，下面這篇文章主要給大家介紹了關(guān)于vue.js如何將echarts封裝為組件一鍵使用的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，需要的朋友可以參考下。
2017-10-10
vue之多項(xiàng)目|多工程共用相同組件的思路解讀
這篇文章主要介紹了vue之多項(xiàng)目|多工程共用相同組件的思路，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-05-05
Vue.js中關(guān)于偵聽(tīng)器（watch）的高級(jí)用法示例
Vue.js 提供了一個(gè)方法 watch，它用于觀察Vue實(shí)例上的數(shù)據(jù)變動(dòng)。下面這篇文章主要給大家介紹了關(guān)于Vue.js中關(guān)于偵聽(tīng)器（watch）的高級(jí)用法的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，需要的朋友可以參考下
2018-05-05
Vue移動(dòng)端下拉加載更多數(shù)據(jù)onload實(shí)現(xiàn)方法淺析
這篇文章主要介紹了Vue移動(dòng)端下拉加載更多數(shù)據(jù)onload實(shí)現(xiàn)方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-02-02
Vue-pdf實(shí)現(xiàn)在線預(yù)覽PDF文件
這篇文章主要為大家詳細(xì)介紹了Vue-pdf實(shí)現(xiàn)在線預(yù)覽PDF文件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-05-05