vue中访问数据接口的配置

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

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

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

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

 assetsSubDirectory: ‘static‘,
        assetsPublicPath: ‘/‘,
        proxyTable: {
            ‘/api‘: { //将www.exaple.com印射为/apis
                target: ‘http://localhost:3816/api/‘, // 接口域名
                changeOrigin: true, //是否跨域
                pathRewrite: {
                    ‘^/api‘: ‘/‘,
                }

            }
        },

        // Various Dev Server settings
        host: ‘localhost‘, // can be overwritten by process.env.HOST
        port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
        autoOpenBrowser: true,
        errorOverlay: true,
        notifyOnErrors: true,
        poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-

  

主要内容为

 proxyTable: {
            ‘/api‘: { //将www.exaple.com印射为/apis
                target: ‘http://localhost:3816/api/‘, // 接口域名
                changeOrigin: true, //是否跨域
                pathRewrite: {
                    ‘^/api‘: ‘/‘,
                }

            }
        },在main.js  配置axios 请求的基础地址时:如下:
import axios from ‘axios‘
import Vuex from ‘vuex‘
import IView from ‘iview‘
import ‘iview/dist/styles/iview.css‘;
Vue.use(IView);
Vue.use(Vuex);
Vue.prototype.axios = axios;
axios.defaults.timeout = 500000;
axios.defaults.headers.post[‘Content-Type‘] = ‘application/json;charset=UTF-8‘;
axios.defaults.baseURL = "http://localhost:3816/api/";

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

如:

this.axios.get("Values")

.then(Response => {

console.log(Response);

});

这配置的过程中发现如下问题:

1.baseURL 必须配置。

2.config/index.js  中的地址不配置 也可以访问到数据 原因未知,欢迎告知

两者具体由什么联系呢????

原文地址:https://www.cnblogs.com/yanwuming/p/9571564.html

时间: 2024-10-06 06:14:10

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

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

作为一个cordova小白,我按照官方文档和网上资料完成了讲vue文件打包到cordova中并打包成apk文件,完成了一个简单app的制作,当我正陶醉于可以自己完成一个app的时候突然发现,我的app居然无法访问服务器数据,这时我疯狂地去找解决方案,然而可能是我的搜索能力太差了,一直没有找到解决方法,最后当我即将放弃的时候发现了一个方法,觉得它是比较靠谱的,果不其然,解决了我的问题. 出现这种原因是因为我安装的android sdk是属于高版本的,在高版本的android sdk中默认开启了对非

在Vue 中调用数据出现属性不存在的问题

这已经是我在调用数据时趟过几次的坑了,索性记录下来防止后面再犯: 一般我们请求数据来渲染一个页面的时候,请求下来的数据基本上都是数组或是对象,再通过列表循环和插值表达式渲染的页面:在data 中提前声明接收数据的变量时若为指定类型,就直接将数据渲染到页面,在浏览器的控制台基本上都会出现 "某某属性未定义" 的英文报错:下面举个例子: 先假设请求的是下面的json 数据: { "code": 0, "data":[ { "name&quo

vue中v-model 数据双向绑定

表单输入绑定 v-model 数据双向绑定,只能应用在input /textare /select <div id="app"> <input type="text" v-model="msg"> <p>{{ msg }}</p> </div> <script src="vue.js"></script> <script> new

python | ubuntu 中 mongodb 数据读写权限配置

首先,我们先对mongodb 数据库的权限做一点说明: 1 默认情况下,mongodb 没有管理员账号2 只有在 admin 数据库中才能添加管理员账号并开启权限3 用户只能在所在的数据库中登录,包括管理员账号4 管理员可以管理所有数据库,但不能直接管理,需要在 admin 里认证后才能 一.设置管理员账号 ssh 登录服务器,执行: // 开启ubuntu上的数据库 sudo mongod service start // 使用shell mongo --port 19999 // 切换到 a

spring boot 中访问 REST 接口

RestTemplate restTemplate = new RestTemplate(); Object result = restTemplate.getForObject("https://www.baidu.com", String.class);

vue中通过后台返回的只动态生成表单及提交

在crm系统中,页面中表单内容和表单提交的内容都是不固定的,特别是表单内容不确定:是根据后台的需要配置出来:前台根据接口返回:进行渲染,处理后进行提交,这样在vue中就会出现问题:因为vue中的数据是先渲染后使用:所有的数据必须先生命出来,所以这样就造成了这个问题: 解决方法: 1.在请求接口:渲染后台需要提交的表单字段的时候:先对所有的需要渲染和提交的表单字段进行遍历,然后存储到data中一个对象中,我写的对象是subParams,这样就可以把所有需要提交的字段提交到subparams中了:

股票财经数据接口(二)

最近股票大跌,打算做点数据分析.转个数据接口,等我完成数据分析有具体结论再写出来吧. 透露个要点,08年是缩量下跌,15年是放量下跌,明显有抛货之嫌,具体是谁不好说. 之前使用了新浪的股票数据,由于新浪http/javascript缺少一些数据,用chrome自带的开发工具监视腾迅财经HTTP信息,得到以下获取股票数据的方法. 以五粮液为例,要获取最新行情,访问数据接口: http://qt.gtimg.cn/q=sz000858 返回数据: v_sz000858="51~五 粮 液 ~0008

腾迅股票数据接口 http/javascript

腾迅股票数据接口 http/javascript 分类: Finance Perl2012-12-21 23:48 31132人阅读 评论(3) 收藏 举报 之前使用了新浪的股票数据,由于新浪http/javascript缺少一些数据,用chrome自带的开发工具监视腾迅财经HTTP信息,得到以下获取股票数据的方法. 以五粮液为例,要获取最新行情,访问数据接口: [html] view plaincopy http://qt.gtimg.cn/q=sz000858 返回数据: [html] vi

vue中引入mock.js

1.安装 npm i mockjs --save 2.直接在main.js里面引用,如图:(此处有坑,因为只在开发环境使用.if里面不能用import方式导入,只能用require方式引入) if (process.env.NODE_ENV !== 'production') require('./mock') 当项目启动后,mock会拦截他规则内的http请求 3.src下新建mock文件夹 index.js import Mock from 'mockjs' import { getUser