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. sql server split切割字符串

    create FUNCTION [dbo].[dnt_split] ( @splitstring varchar(max), @separator CHAR() = ',' ) RETURNS @sp ...

  2. PyCharm提示ModuleNotFoundError: No module named 'pymysql'

    初学python,连接mysql时遇到了提示pymysql模块导入有问题,本人虽是window系统,解决思路是一样的 代码如下: import pymysql#打开数据库,参数依次为:主机名/IP,用 ...

  3. JMeter测试HBase

    在网上找了关于jmeter连接hbase的方式,主要分为两种:通过导入jar包连接(Java Request)和通过BeanShell远程连接,由于刚接触jmeter没多久,对BeanShell还不熟 ...

  4. 【leetcode】280.Wiggle Sort

    原题 Given an unsorted array nums, reorder it in-place such that nums[0] <= nums[1] >= nums[2] & ...

  5. c# List<Object>和List<实体>相互转化

    开发的过程中总会遇到各种转化的问题,现在我做的开发接口中就遇到需要将List<Object> 中的Object又含有List<实体>归为一个list中,就是要list中没有Li ...

  6. git命令——git log

    功能 在提交了若干更新,又或者克隆了某个项目之后,你也许想回顾下提交历史. 完成这个任务最简单而又有效的方法是 使用git log 命令. 参数 不带任何参数 $ git log commit ca8 ...

  7. Linux中安装配置启动关闭nginx等一系列动作

    Nginx简介 1.Nginx (engine x) 是一个高性能的Web服务器和反向代理服务器,也可以作为邮件代理服务器: 2.Nginx 是由俄罗斯人 Igor Sysoev 采用C语言开发编写的 ...

  8. kubernetes集群初始化(二)

    参考地址:https://github.com/unixhot/salt-kubernetes 一.系统初始化 1.1.安装docker 所有节点都安装docker,设置docker国内yum源 [r ...

  9. webpack多页面打包配置

    单页面应用:整个应用里面只有一个html文件.现在主流的框架,vue,react都是单页面应用. 所以webpack绝大部分都是对单页面打包.那么webpack如何对多页面进行打包 index.htm ...

  10. python-Redis cluster基础指标监控

    #!/usr/local/python/shims/python from rediscluster import StrictRedisCluster ''' 需要在宿主机python中安装redi ...