业务API接口地址: http://localhost:3816/api/

前端UI浏览地址:http://127.0.0.1:8080/#/home

由于同源策略的问题: 需要配置代理: 

在开发环境下配置如下:config/index.js

  1. assetsSubDirectory: 'static',
  2. assetsPublicPath: '/',
  3. proxyTable: {
  4. '/api': { //将www.exaple.com印射为/apis
  5. target: 'http://localhost:3816/api/', // 接口域名
  6. changeOrigin: true, //是否跨域
  7. pathRewrite: {
  8. '^/api': '/',
  9. }
  10.  
  11. }
  12. },
  13.  
  14. // Various Dev Server settings
  15. host: 'localhost', // can be overwritten by process.env.HOST
  16. port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
  17. autoOpenBrowser: true,
  18. errorOverlay: true,
  19. notifyOnErrors: true,
  20. poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-

  

主要内容为

  1. proxyTable: {
  2. '/api': { //将www.exaple.com印射为/apis
  3. target: 'http://localhost:3816/api/', // 接口域名
  4. changeOrigin: true, //是否跨域
  5. pathRewrite: {
  6. '^/api': '/',
  7. }
  8.  
  9. }
  10. },
    main.js 配置axios 请求的基础地址时:
    如下:
  1. import axios from 'axios'
  2. import Vuex from 'vuex'
  3. import IView from 'iview'
  4. import 'iview/dist/styles/iview.css';
  5. Vue.use(IView);
  6. Vue.use(Vuex);
  7. Vue.prototype.axios = axios;
  8. axios.defaults.timeout = ;
  9. axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8';
  10. axios.defaults.baseURL = "http://localhost:3816/api/";

数据请求的基础接口地址为      http://localhost:3816/api/    这样配置后就可以在发请求的时候,不需要添加具体的域名地址了,就可以访问数据

  1. 如:
this.axios.get("Values")
.then(Response => {
console.log(Response);
});
这配置的过程中发现如下问题:
1.baseURL 必须配置。
2.config/index.js  中的地址不配置 也可以访问到数据 原因未知,欢迎告知
两者具体由什么联系呢????

vue中访问数据接口的配置的更多相关文章

  1. es6中的Proxy和vue中的数据代理的异同

    1:概述 1-1:Proxy 用于修改某些操作的默认行为,Proxy可以说在对对象进行各种访问或者操作的时候在外层进行一层拦截,在操作之前都需要经过这种拦截.proxy返回的是一个新对象,可以通过操作 ...

  2. vue中的数据监听以及数据交互

    现在我们来看一下vue中的数据监听事件$watch, js代码: new Vue({ el:"#div", data:{ arr:[,,] } }).$watch("ar ...

  3. 关于cordova+vue打包apk文件无法访问数据接口

    作为一个cordova小白,我按照官方文档和网上资料完成了讲vue文件打包到cordova中并打包成apk文件,完成了一个简单app的制作,当我正陶醉于可以自己完成一个app的时候突然发现,我的app ...

  4. 在 SharePoint 2010 中访问数据

    转:http://blog.banysky.net/?p=81001 数据访问的关键方法有哪些? | 使用查询类 | 使用 SPQuery | 使用 SPSiteDataQuery | 使用 LINQ ...

  5. vue中axios调用接口和用node.js跨域

    <script>const API_PROXY = 'https://bird.ioliu.cn/v1/?url='import axios from 'axios'export defa ...

  6. vue中的数据双向绑定

    学习的过程是漫长的,只有坚持不懈才能到达到自己的目标. 1.vue中数据的双向绑定采用的时候,数据劫持的模式.其实主要是用了Es5中的Object.defineProperty;来劫持每个属性的get ...

  7. Pod中访问外部的域名配置

    在实际应用中经常遇到Pod中访问外部域名的状况,在Kubenetes 1.6以上的版本通过配置DNS configmap已经解决,详细的内容可以参考官方的 https://kubernetes.io/ ...

  8. vue 中全局filter过滤器的配置及使用

    在项目中使用到的经常用到过滤器,比如时间,数据截取等过滤器,如果在每个.vue中都可以复制同一个过滤器,这可以达到目的,但是遇到方法有bug时就需要诸葛修改进入不同的页面修改,这样既费时又费力,优先可 ...

  9. WebService---Android中访问WebService接口的方法

     最近公司有个项目需要从Android平台访问WebService接口,实现向发布的函数传递对象.在网上找了一些资料,发现使用ksoap2可以调用WebService传递对象.   需要引入ksoap ...

随机推荐

  1. linux下启动jekins报错

    进入默认安装目录,执行java -jar jekins.war 启动使用端口号: java -jar jenkins.war --httpPort=8085,即启动完成 这个有个弊端,关闭后下次还得这 ...

  2. javaweb项目中获取项目名称

    request.getServletContext().getContextPath() 增加项目名称是test.那么上面的结果就是/test

  3. GDI+学习之------色彩与图像

    色彩 在GDI+中.色彩是通过Color类来描写叙述的.不是用RGB类.用RGB构造会出错.GDI+中的色彩信息值是由一个32位的数据来表示的,它包含8位alpha值和各8位的R.G.B值,对于alp ...

  4. oc29--property修饰符

    // // Person.h #import <Foundation/Foundation.h> @interface Person : NSObject /* 如果给一个属性同时提供了g ...

  5. android recovery 主系统代码分析【转】

    本文转载自:http://blog.csdn.net/andyhuabing/article/details/9248713 阅读完上一篇文章: http://blog.csdn.net/andyhu ...

  6. null in JavaScript

    C# String.IsNullOrEmpty Javascript equivalent https://stackoverflow.com/questions/5746947/c-sharp-st ...

  7. C# SuperWebSocket服务端、客户端学习(三)

    1.打开VS2012,新建一个windows窗体程序,选择.NET4.0版本 2.添加引用 SuperSocket的dll文件( SuperSocket.Common.dll, SuperSocket ...

  8. 【BZOJ 2288】 生日礼物

    [题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=2288 [算法] 先将这个序列的正负数合并起来,变成一个正负交替的序列 如果新序列的正 ...

  9. LA4788

    贪心 这个贪心不太懂啊 dfs返回子树需要的最小值,然后按需要减消耗排序,然后贪心选取即可. #include<bits/stdc++.h> using namespace std; ty ...

  10. bzoj2822[AHOI2012]树屋阶梯(卡特兰数)

    2822: [AHOI2012]树屋阶梯 Time Limit: 1 Sec  Memory Limit: 128 MBSubmit: 879  Solved: 513[Submit][Status] ...