关于vue+elementui 访问本地json和跨域访问API问题。

关于vue+elementui 访问本地json和跨域访问API问题。

npm准备

安装element 和axios

//axios
npm install axios -S
//element
npm install element-ui -S

main.js

import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui';
import axios from 'axios'
// import  VueResource  from 'vue-resource'


import 'element-ui/lib/theme-chalk/index.css';
axios.defaults.baseURL='http://localhost:3000'
Vue.prototype.$axios = axios;
// Vue.prototype.$http = require('axios');
//Vue.config.productionTip = false
Vue.use(ElementUI);
// Vue.use(VueResource);
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

本地JSON

      mounted() {
        this.$axios.get("../static/sojson.com.json").then((res)=>{
          debugger;
          this.tableData2 = res.data;
          console.log(res);
        }
        )
  }

// 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 ElementUI from 'element-ui';
import axios from 'axios'
import  VueResource  from 'vue-resource'


import 'element-ui/lib/theme-chalk/index.css';
axios.defaults.baseURL='http://localhost:8080'
Vue.prototype.$axios = axios;
// Vue.prototype.$http = require('axios');
Vue.config.productionTip = false
Vue.use(ElementUI);
Vue.use(VueResource);
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

前后端跨域访问后台接口

vue；

      mounted:function() {
        //这里放获取json数据
        var that = this
        this.$axios({
          method: 'get',
          headers: {
            'ContentType': 'application/json',
            'Access-Control-Allow-Origin':'http://192.168.1.101:8080',
            'Access-Control-Allow-Credentials':'true',
            'Access-Control-Allow-Method':'GET'
          },
          dataType: 'json',
          ContentType: 'application/json;charset-utf-8',
          url: 'http://192.168.1.101:8080/user/all',
          //可以在config的index.js中添加api   url: 'api/user/all',
          data: {
          }
        }).then(function (response) {
          that.tableData2 = response.data
          console.log(tableData2)
        }).catch(function (error) {
          console.log(error)
        })
      }

config/index.js

module.exports = {
  dev: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/api':{                                // 要代理的接口名
        target:'http://192.168.1.101:8080',   // 要代理的接口地址
        changeOrigin:true,                            // 允许跨域
        pathRewrite:{'^/api':''}            // 接口名重写
      }
    },