vue cli 2.0配置代理 跨域请求

流程

运行结果

项目结构

1、vue-cli2
    npm i vue-cli g //安装vue2 
    vue init webpack mydemo1 //创建项目
2、express-generator
    全局安装 
    npm i express-generator -g 
    express --view=ejs server 项目名称 
    express --view=ejs server mydemo1 创建后台

路径：config\index.js
    proxyTable: {
      '/yifeng': {
         // target: "http://localhost:3000",//代理到3000这个接口上去了
         target: 'http://es6.ruanyifeng.com',
         changeOrigin: true,
         pathRewrite: {
           '^/yifeng': '/'
         }
       },
      '/mooc': {
        target: 'https://www.3mooc.com/',
        changeOrigin: true,
        pathRewrite: {
          '^/mooc': '/'
        }
      },
      '/bendi': {
        target: "http://localhost:3000",//本地server服务器 代理到3000这个接口上去了
        changeOrigin: true,
        pathRewrite: {
          '^/bendi': '/'
        }
      }
    },

路径：server\routes\index.js

var express = require('express');
var router = express.Router();

router.get('/', function (req, res, next) {
  res.render('index', { title: 'Express' });
});
router.get('/list', function (req, res, next) {
  res.json({
    name: '你请求的是列表',
    age: 'ls'
  })
});
router.get('/news', function (req, res, next) {
  res.json({
    name: '你请求的是新闻',
    age: 'news'
  })
});
module.exports = router;

路径：src\components\HelloWorld.vue

<template>
  <div class="hello">
    ------------1 一峰----------------
    <div v-html="yifengs"></div>-----------1 三人行-----------------
    <div v-html="moocContent"></div>
    
  </div>
</template>
<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      yifengs: "",
      moocContent: ""
    };
  },
  mounted() {
    let that = this;
    this.axios.get("/yifeng").then(function(res) {
      that.yifengs = res.data;
    });
    this.axios.get("/mooc").then(function(resMooc) {
      that.moocContent = resMooc.data;
    });
    this.axios.get('/bendi/list').then(function(res){
      console.log('本地server--list',res);
    })
      this.axios.get('/bendi/news').then(function(res){
      console.log('本地server--news',res);
    })
  }
};
</script>

路径：src\main.js
import axios from 'axios'
Vue.prototype.axios = axios;