使用vue-cli+axios配置代理進行跨域訪問數據

一、首先在本地全局安裝 vue-cli

vue-cli網址：https://github.com/vuejs/vue-cli

先在控制檯安裝 全局vue-clis

npm install -g vue-cli

 

二、初始化項目(vuecli 項目名稱)

vue init webpack vuecli  //vuecli是項目名

 

也能夠在空項目中輸入 vue init webpack 將項目變爲 vue-cli項目

三、在vuecli 項目中安裝依賴文件

npm install

四、在vuecli 項目中安裝axios

npm install axios -D

五、在vuecli 項目中安裝http-proxy-middleware中間件做爲代理

npm install -S http-proxy-middleware

 

爲何要http-proxy-middleware作爲中間代理？

緣由就是由於客戶端請求服務端的數據是存在跨域問題的，而服務器和服務器之間能夠相互請求數據，是沒有跨域的概念（若是服務器沒有設置禁止跨域的權限問題），也就是說，咱們能夠配置一個代理的服務器能夠請求另外一個服務器中的數據，而後把請求出來的數據返回到咱們的代理服務器中，代理服務器再返回數據給咱們的客戶端，這樣咱們就能夠實現跨域訪問數據啦。

六、在vuecli 項目的找到src/main.js中引入axios

import Vue from 'vue'
import App from './App'
import router from './router'
import axios from 'axios' // 一、在這裏引入axios

Vue.prototype.$

ajax

= axios; // 二、在vue中使用axios Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#app', router, template: '<App/>', components: { App } })

 

 七、爲http-proxy-middleware這個中間件進行本地代理配置，在vuecli 項目中找到config/index.js

'use strict'
// Template version: 1.3.1
// see http://vuejs-templates.github.io/webpack for documentation.

const path = require('path')

module.exports = {
  dev: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/api': {
        target:'http://api.qingyunke.com/api.php', // 你請求的第三方接口
        changeOrigin:true, // 在本地會建立一個虛擬服務端，而後發送請求的數據，並同時接收請求的數據，這樣服務端和服務端進行數據的交互就不會有跨域問題
        pathRewrite:{  // 路徑重寫，
          '^/api': '/api'  // 替換target中的請求地址，也就是說之後你在請求http://api.jisuapi.com/XXXXX這個地址的時候直接寫成/api便可。
        }
      }
    },
...剩下代碼省略

 若是不使用  http-proxy-middleware 這個中間件就會報以下錯誤：

這個錯誤就是由於跨域所引發的

八、在vuecli 項目的找到src/components/HelloWorld.vue，代碼修改以下

<template>
  <div>
  <p>
    請輸入您的問題:
    <input v-model="question" @keyup.enter="getAnswer()">
  </p>
    <p >{{ answer }}</p>
  </div>
</template>
<script>
  import '../../static/js/lodash.min';
    export default {
        name: "

HelloWorld

",
        data(){
          return {
            question:"",
            answer:'有問必答'
          }
        },
        methods:{
          getAnswer: _.debounce(function () {
            var vm = this;
            vm.answer = '讓我想一想...';
            var url="?key=free&appid=0&msg="+vm.question;//這裏是拼接url

            this.$ajax.get('/api'+url)// 這裏就是剛纔的config/index.js中的/api
              .then(function(response) {
                vm.answer = _.capitalize(response.data.content);
                console.log(response);
              })
              .catch(function(error) {
                vm.answer = '發生了錯誤，不能調用該應用程序接口' + error
              })
          },1000)
        }
    }
</script>

<style scoped>

</style>

 

 九、由於在新版的vue-cli的package.json中webpack-dev-server沒有設置--open,因此打開package.json文件在」scripts」屬性中的」dev」屬性中手動添加--open，以下代碼所示

"scripts": {
    "dev": "webpack-dev-server --open --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "unit": "jest --config test/unit/jest.conf.js --coverage",
    "e2e": "node test/e2e/runner.js",
    "test": "npm run unit && npm run e2e",
    "lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs",
    "build": "node build/build.js"
  },

 

 

十、在cmd控制檯中輸入npm run dev 啓動服務。效果圖以下：

 

 

npm install