您好,登錄后才能下訂單哦!
這篇“vue怎么解決代理和跨域問題”文章的知識點(diǎn)大部分人都不太理解,所以小編給大家總結(jié)了以下內(nèi)容,內(nèi)容詳細(xì),步驟清晰,具有一定的借鑒價值,希望大家閱讀完這篇文章能有所收獲,下面我們一起來看看這篇“vue怎么解決代理和跨域問題”文章吧。
一、安裝vue-resource插件
cnpm install vue-resource --save
在根目錄下的package.json檢查一下插件的版本
在rourer-index.js下引入文件
import Resource from 'vue-resource' Vue.use(Resource)
引入vue-resource后,可以基于全局的Vue對象使用http,也可以基于某個Vue實(shí)例使用http
二、安裝axios插件
cnpm install --save axios
在后臺服務(wù)文件(server.js)中引入
var axios = require('axios')
新建一個公共Js文件,用于存放httpserver
import axios from 'axios' // 引入axios插件 export function getHttp (url, callFun) { //get請求方法 axios.get(url).then(callFun) .catch(function(err){ console.log(err) }) }
三、proxy代理
在config-index.js
文件下找到proxyTable
設(shè)置代理
例如我的vue項(xiàng)目鏈接是 localhost:8080 后臺數(shù)據(jù)地址是 localhost:8081/api/seller(端口不一樣)
proxyTable: { '/api': { target: 'http://localhost:8081', changeOrigin: true, pathRewrite: { '^/api': '/api' // pathRewrite方法重寫url, 這樣配置出來的url為http://localhost:8081/api/seller // '^/api': '/' // pathRewrite方法重寫url, 這樣配置出來的url為http://localhost:8081/seller } } }
四、數(shù)據(jù)調(diào)用
在想調(diào)用數(shù)據(jù)的vue頁面中寫入如下代碼
js部分
<script> import {getHttp} from '../static/js/httpserver.js' export default { data () { return { seller: {} } }, methods: { shangjia: function () { let url = '/api/seller' getHttp(url, function (res) { res = res.data console.log(res) }) } } } </script>
html部分
<template> <div id="app"> <div @click='shangjia()'><router-link to='/seller'>商家</router-link></div> <router-view></router-view> </div> </template>
Vue具體輕量級框架、簡單易學(xué)、雙向數(shù)據(jù)綁定、組件化、數(shù)據(jù)和結(jié)構(gòu)的分離、虛擬DOM、運(yùn)行速度快等優(yōu)勢,Vue中頁面使用的是局部刷新,不用每次跳轉(zhuǎn)頁面都要請求所有數(shù)據(jù)和dom,可以大大提升訪問速度和用戶體驗(yàn)。
以上就是關(guān)于“vue怎么解決代理和跨域問題”這篇文章的內(nèi)容,相信大家都有了一定的了解,希望小編分享的內(nèi)容對大家有幫助,若想了解更多相關(guān)的知識內(nèi)容,請關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。