01-安装axios,指令(npm install --save axios)
02-解决跨域问题
  在config=>中创建一个新的文件proxyConfig.js

module.exports = {
proxy: {
'/apis': { //将www.exaple.com印射为/apis
target: 'http://baidu.com', // 修改为你的接口域名
changeOrigin: true, //是否跨域
pathRewrite: {
'^/apis': '' //需要rewrite的,
}
}
}
}

  在config=>index.js文件中

    引入:var proxyConfig = require('./proxyConfig')

    赋值: proxyTable: proxyConfig.proxy,

  
03 - 在main.js中引入和定义全局url
    import Axios from "axios"
    Vue.prototype.$axios  = Axios;
    Vue.prototype.HOST = "/apis"
04 - 重新启动 npm start
05 - 项目中使用:

mounted() {
var url = this.HOST + "/v1/restserver/ting?method=baidu.ting.billboard.billList&type="+ this.type +"&size=6&offset=0";
console.log(url);
this.$axios.get(url)
.then(res=>{
console.log(res);
})
.catch(error=>{
console.log(error);
})
},

Vue学习手记04-跨域问题的更多相关文章

  1. Vue解决接口访问跨域问题

    随手摘录 Vue解决接口访问跨域问题 1.打开 config -> index.js 2. 找到proxyTable 3.粘贴 如下代码,'https://www.baidu.com'换成要访问 ...

  2. 前端vue开发中的跨域问题解决,以及nginx上线部署。(vue devServer与nginx)

    前言 最近做的一个项目中使用了vue+springboot的前后端分离模式 在前端开发的的时候,使用vue cli3的devServer来解决跨域问题 上线部署则是用的nginx反向代理至后台服务所开 ...

  3. vue webpack配置解决跨域问题

    现在基本项目都是实行前后端分离的原则,不管是ng 或者是vue 在开发中都无法避免跨域的这个问题 本人刚上手第一个vue项目,在调用api的时候出现了跨域的这个问题 这是封装好一个简单的post 请求 ...

  4. 学无止境,学习AJAX,跨域(三)

    学习AJAX其实有个很重要的应用,就是为了执行另外几个站点的ASP,返回结果. 真正用起来,发现2个问题,>_> 不许笑,一向做DELPHI,接触ASP不多的我,的确问题大堆. 第一个问题 ...

  5. vue踩坑(二):跨域以及携带cookie

    最近后台需求要在请求的时候传cooki给后台,正常情况下拿到cookie后存在cookie里,同域名下是会自己带到请求头里的,但是因为要在本地调试,那么问题就来了,localhost:8080下面的c ...

  6. 跨域学习笔记2--WebApi 跨域问题解决方案:CORS

    自己并不懂,在此先记录下来,留待以后学习... 正文 前言:上篇总结了下WebApi的接口测试工具的使用,这篇接着来看看WebAPI的另一个常见问题:跨域问题.本篇主要从实例的角度分享下CORS解决跨 ...

  7. 详解Vue 开发模式下跨域问题

    vue项目中,前端与后台进行数据请求或者提交的时候,如果后台没有设置跨域,前端本地调试代码的时候就会报“No 'Access-Control-Allow-Origin' header is prese ...

  8. vue 使用 proxyTable 解决跨域问题

    1.在 main.js 中,在引入 axios: import axios from 'axios' Vue.config.productionTip = false Vue.prototype.$a ...

  9. Vue.js 2.0 跨域请求数据

    Vuejs由1.0更新到了2.0版本.HTTP请求官方也从推荐使用Vue-Resoure变为了 axios .接下来我们来简单地用axios进行一下异步请求.(阅读本文作者默认读者具有使用npm命令的 ...

随机推荐

  1. SD-定义定价用途的条件表(Condition Table)

    https://www.fenginfo.com/815.html 条件表(Condition Table)是SAP条件技术体系中最基础的数据源,它们是一群特定的数据表,表名是以特定字母开头 + 三位 ...

  2. IDEA提示不区分大小写设置

    File–>Settings–>Editor–>General–>Code Completion–>Mach case的勾取消掉就可以了 取消勾后效果如下

  3. 2-Spark-1-性能调优-数据倾斜2-Join/Broadcast的使用场景

    技术点:RDD的join操作可能产生数据倾斜,当两个RDD不是非常大的情况下,可以通过Broadcast的方式在reduce端进行类似(Join)的操作: broadcast是进程级别的,只读的. b ...

  4. Flask之Local、LocalStack和LocalProxy

    在我们使用Flask以及Werkzeug框架的过程中,经常会遇到如下三个概念:Local.LocalStack和LocalProxy.尤其在学习Flask的Request Context和App Co ...

  5. 昨天521表白失败,我想用Python分析一下...表白记录和聊天记录

    昨天跟喜欢的妹子表白了. 失败了!.下面是表白的聊天记录: (跟妹子已经认识一段时间) 我:灭嘤嘤,我喜欢你. 妹子:你干嘛? 我:今天520,跟你表白鸭. 妹子:那....有多喜欢? 我: 有很多很 ...

  6. OpenStack中虚拟机获取不到IP地址的解决方法

    OpenStack源码交流群: 538850354 系统环境: centos6.5 + icehouse多节点部署 问题描述: 使用测试镜像cirros,虚拟机实例可以正常启动,但是不能从IP池中获取 ...

  7. 第五周作业:markdown语法小总结

    第五周作业 markdown语法总结 早就想写这么一个文章了,关于markdown的语法,因为最近使用的比较多,所以特地总结一下 一,标题 首先要介绍的就是标题, 标题一共有六级 # h1 ## h2 ...

  8. 服务器上 MySql 8.0.16创建远程连接账号、获取初始密码、修改密码、重启命令等

    一. 创建远程连接账号 1. 终端连接服务器 ssh -p 端口号 用户名@ip地址 例如:ssh -p 22 yyy@1.2.3.4 2.进入mysql mysql -u 用户名 -p 然后输入密码 ...

  9. java中的assert

    Java陷阱之assert关键字   一.概述   在C和C++语言中都有assert关键,表示断言. 在Java中,同样也有assert关键字,表示断言,用法和含义都差不多.   二.语法   在J ...

  10. Mybatis-Generator逆向工程,简单策略

    1.下载generator包 https://github.com/mybatis/generator/releases mybatis-generator-core-1.3.6.zip 官网下载即可 ...