vue2.0 axios跨域并渲染的問(wèn)題解決方法
(用的腳手架vue-cli)
第一步: 在main.js中如下聲明使用
import axios from 'axios'; Vue.prototype.$axios=axios;
那么在其他vue組件中就可以this.$axios調(diào)用使用
第二步:在webpack配置一下proxyTable(config之下的index.js)
dev: { 加入以下 proxyTable: { '/api': { target: 'http://api.douban.com',//設(shè)置你調(diào)用的接口域名和端口號(hào) 別忘了加http changeOrigin: true, pathRewrite: { '^/api': '/'//這里理解成用‘/api'代替target里面的地址,后面組件中我們掉接口時(shí)直接用api代替 比如我要調(diào)用'http://api.douban.com/v2/movie/top250',直接寫(xiě)‘/api/v2/movie/top250'即可 } } },
第三步:
試一下,跨域成功了,但是注意了,這只是開(kāi)發(fā)環(huán)境(dev)中解決了跨域問(wèn)題,生產(chǎn)環(huán)境中真正部署到服務(wù)器上如果是非同源還是存在跨域問(wèn)題,如我們部署的服務(wù)器端口是3001,需要前后端聯(lián)調(diào),第一步前端我們可以分生產(chǎn)production和開(kāi)發(fā)development兩種環(huán)境分別測(cè)試,在config/dev.env.js和prod.env.js里也就是開(kāi)發(fā)/生產(chǎn)環(huán)境下分別配置一下請(qǐng)求的地址API_HOST,開(kāi)發(fā)環(huán)境中我們用上面配置的代理地址api,生產(chǎn)環(huán)境下用正常的接口地址,所以這樣配置
module.exports = merge(prodEnv, { NODE_ENV: '"development"',//開(kāi)發(fā)環(huán)境 API_HOST:"/api/" })
module.exports = { NODE_ENV: '"production"',//生產(chǎn)環(huán)境 API_HOST:'"http://api.douban.com"' }
當(dāng)然不管是開(kāi)發(fā)還是生產(chǎn)環(huán)境都可以直接請(qǐng)求http://api.douban.com。配置好之后測(cè)試時(shí)程序會(huì)自動(dòng)判斷當(dāng)前是開(kāi)發(fā)還是生產(chǎn)環(huán)境,然后自動(dòng)匹配API_HOST,我們?cè)谌魏谓M件里都能用process.env.API_HOST來(lái)使用地址如
instance.post(process.env.API_HOST+'user/login', this.form)
然后第二步后端服務(wù)器配置一下cros跨域即可,就是access-control-allow-origin:*允許所有訪問(wèn)的意思。綜上:開(kāi)發(fā)的環(huán)境下我們前端可以自己配置個(gè)proxy代理就能跨域了,真正的生產(chǎn)環(huán)境下還需要后端的配合的。某大神說(shuō):此方法ie9及以下不好使,如果需要兼容,最好的辦法是后端在服務(wù)器端口加個(gè)代理,效果類似開(kāi)發(fā)時(shí)webpack的代理。
第四步:
<template> <div> <ul> <li v-for="item in movieArr"> <span>{{item.title}}</span> </li> </ul> <button @click="sayOut">渲染</button> </div> </template> <script> export default { data () { return { movieArr : [] } }, methods: { sayOut () { this.$axios.get('/api/v2/movie/top250') .then((response) => { console.log(response.data.subjects) this.movieArr = response.data.subjects // 這里要強(qiáng)調(diào)一下這個(gè)this 箭頭函數(shù)指的是它的父級(jí)也就是vue實(shí)例 然后不用箭頭函數(shù)的話 this是一個(gè)undefined 無(wú)法.movieArr來(lái)給他賦值 這里要注意一下 我被坑了半天 希望小伙伴不要被坑 }) } } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> </style>
以上這篇vue2.0 axios跨域并渲染的問(wèn)題解決方法就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
Vue 項(xiàng)目中如何使用fullcalendar 時(shí)間段選擇插件(類似課程表格)
最近完成一個(gè)項(xiàng)目,需要選擇一個(gè)會(huì)議室,但是最好能夠通過(guò)在圖上顯示出該 會(huì)議室在某某時(shí)間段內(nèi)已經(jīng)被預(yù)定了,初看這個(gè)功能感覺(jué)很棘手,仔細(xì)分析下實(shí)現(xiàn)起來(lái)還是挺容易的,下面通過(guò)示例代碼講解Vue項(xiàng)目中使用fullcalendar時(shí)間段選擇插件,感興趣的朋友一起看看吧2024-07-07Vue.js中使用components組件的實(shí)例講解
這篇文章主要介紹了Vue.js中使用components組件的實(shí)例講解,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-07-07淺析vue偵測(cè)數(shù)據(jù)的變化之基本實(shí)現(xiàn)
這里涉及到Vue一個(gè)重要特性:響應(yīng)式系統(tǒng)。數(shù)據(jù)模型只是普通的 JavaScript對(duì)象,當(dāng)我們修改時(shí),視圖會(huì)被更新,而變化偵測(cè)是響應(yīng)式系統(tǒng)的核心2021-06-06vue中el-form-item展開(kāi)項(xiàng)居中的實(shí)現(xiàn)方式
這篇文章主要介紹了vue中el-form-item展開(kāi)項(xiàng)居中的實(shí)現(xiàn)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10vue?cli?局部混入mixin和全局混入mixin的過(guò)程
這篇文章主要介紹了vue?cli?局部混入mixin和全局混入mixin的過(guò)程,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-05-05vue-router路由跳轉(zhuǎn)問(wèn)題 replace
這篇文章主要介紹了vue-router路由跳轉(zhuǎn)問(wèn)題 replace,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-09-09Vue.js學(xué)習(xí)記錄之在元素與template中使用v-if指令實(shí)例
這篇文章主要給大家介紹了關(guān)于Vue.js學(xué)習(xí)記錄之在元素與template中使用v-if指令的相關(guān)資料,文中給出了詳細(xì)的示例代碼供大家參考學(xué)習(xí),相信對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起看看吧。2017-06-06