(用的腳手架vue-cli)

在河曲等地區(qū)，都構(gòu)建了全面的區(qū)域性戰(zhàn)略布局，加強發(fā)展的系統(tǒng)性、市場前瞻性、產(chǎn)品創(chuàng)新能力，以專注、極致的服務(wù)理念，為客戶提供做網(wǎng)站、成都網(wǎng)站設(shè)計 網(wǎng)站設(shè)計制作定制網(wǎng)站設(shè)計,公司網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè),高端網(wǎng)站設(shè)計,營銷型網(wǎng)站建設(shè),成都外貿(mào)網(wǎng)站建設(shè),河曲網(wǎng)站建設(shè)費用合理。

第一步： 在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)用的接口域名和端口號
 別忘了加http 
changeOrigin:
true,
pathRewrite:
 { 
'^/api':
'/'//這里理解成用‘/api'代替target里面的地址，后面組件中我們掉接口時直接用api代替
 
比如我要調(diào)用'http://api.douban.com/v2/movie/top250'，直接寫‘/api/v2/movie/top250'即可
}
}
},

第三步：

試一下，跨域成功了，但是注意了，這只是開發(fā)環(huán)境（dev）中解決了跨域問題，生產(chǎn)環(huán)境中真正部署到服務(wù)器上如果是非同源還是存在跨域問題，如我們部署的服務(wù)器端口是3001，需要前后端聯(lián)調(diào)，第一步前端我們可以分生產(chǎn)production和開發(fā)development兩種環(huán)境分別測試，在config/dev.env.js和prod.env.js里也就是開發(fā)/生產(chǎn)環(huán)境下分別配置一下請求的地址API_HOST，開發(fā)環(huán)境中我們用上面配置的代理地址api，生產(chǎn)環(huán)境下用正常的接口地址，所以這樣配置

module.exports = merge(prodEnv, {
 NODE_ENV: '"development"',//開發(fā)環(huán)境
 API_HOST:"/api/"
})

module.exports = {
 NODE_ENV: '"production"',//生產(chǎn)環(huán)境
 API_HOST:'"http://api.douban.com"'
}

當(dāng)然不管是開發(fā)還是生產(chǎn)環(huán)境都可以直接請求http://api.douban.com。配置好之后測試時程序會自動判斷當(dāng)前是開發(fā)還是生產(chǎn)環(huán)境，然后自動匹配API_HOST，我們在任何組件里都能用process.env.API_HOST來使用地址如

instance.post(process.env.API_HOST+'user/login', this.form)

然后第二步后端服務(wù)器配置一下cros跨域即可，就是access-control-allow-origin：*允許所有訪問的意思。綜上：開發(fā)的環(huán)境下我們前端可以自己配置個proxy代理就能跨域了，真正的生產(chǎn)環(huán)境下還需要后端的配合的。某大神說：此方法ie9及以下不好使，如果需要兼容，最好的辦法是后端在服務(wù)器端口加個代理，效果類似開發(fā)時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 // 這里要強調(diào)一下這個this 箭頭函數(shù)指的是它的父級也就是vue實例 然后不用箭頭函數(shù)的話 this是一個undefined 無法.movieArr來給他賦值 這里要注意一下 我被坑了半天 希望小伙伴不要被坑
    })
   }
 }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

以上這篇vue2.0 axios跨域并渲染的問題解決方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持創(chuàng)新互聯(lián)。

分享標(biāo)題：vue2.0axios跨域并渲染的問題解決方法
URL分享：http://www.yijiale78.com/article2/gsopoc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供ChatGPT、網(wǎng)頁設(shè)計公司、網(wǎng)站策劃、建站公司、網(wǎng)站排名、品牌網(wǎng)站設(shè)計

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)