axios + vue-cli 解决跨域问题 &&am

                  最近自己在学vue的知识，其中遇到数据这一块的问题，总结记录下

跨域解决的方法

使用代理，说到代理就想到es6中的代理proxy,这里说的是接口跨域的 vue proxyTable

我们在使用vue-cli启动项目的时候npm run dev便可以启动我们的项目了，通常我们的请求地址是以localhost:8080来请求接口数据的，localhost是没有办法设置cookie的。

设置代理接口：

config index.js

   // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {    //设置开始
      '/api': {
        target: 'https://api.douban.com/v2',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    },

代理其实是利用的就是 http-proxy-middleware 插件完成的；

入口文件

main.js

下面是自己的配置：

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios,axios)
Vue.prototype.$axios = axios; 

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})

webpack.dev.conf.js 配置

// 后端代理
const express=require('express')
const axios=require('axios')
const app=express()
var apiRoutes=express.Router()
app.use('/api',apiRoutes)

//引用
  devServer: {
    before(app){
      app.get('/api', (req, res) => {
     
          })
      })
    },

组件中引用数据

  created:function (){

      var url='/api/movie/in_theaters';
       this.$axios.get(url).then((response)=>{
        console.log(response)
        }).catch((e)=>{
         console.log(e)
      })

静态路由数据模拟配置

webpack.dev.conf.js 配置

// 后端代理
const express=require('express')
const axios=require('axios')
const app=express()
var apiRoutes=express.Router()
app.use('/api',apiRoutes)

//引用本地数据文件
var homeData=require('../src/data/homeData.json');
//引用
  devServer: {
    before(app){

      app.get('/api/homeData', (req, res) => {
        
         res.json({   
            errno:0,
            data:homeData  //配置返回函数名字
          })

          })
      })
    },

组件引用

 data(){
    return{
      recommendData:[],
      hotData:[]
    }
  },
  created:function (){

      this.fetchData();

      this.$axios.get('/api/homeData').then((response)=>{
        console.log(response.data)
      })
  },
  methods:{
      fetchData(){
        this.$axios.get('/api/homeData').then((response)=>{
          let data = response.data.data.recommend_feeds;
          let recommend = [];
          let hot = [];
          for(var i in data){
            if(data[i].card && data[i].card.name == '为你推荐'){
              recommend.push(data[i]);
            }else{
              hot.push(data[i]);
            }
          }
          this.recommendData=recommend;
          this.hotData=hot;
        })
      }
  }