Vue学习手记04-跨域问题
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-跨域问题的更多相关文章
- Vue解决接口访问跨域问题
随手摘录 Vue解决接口访问跨域问题 1.打开 config -> index.js 2. 找到proxyTable 3.粘贴 如下代码,'https://www.baidu.com'换成要访问 ...
- 前端vue开发中的跨域问题解决,以及nginx上线部署。(vue devServer与nginx)
前言 最近做的一个项目中使用了vue+springboot的前后端分离模式 在前端开发的的时候,使用vue cli3的devServer来解决跨域问题 上线部署则是用的nginx反向代理至后台服务所开 ...
- vue webpack配置解决跨域问题
现在基本项目都是实行前后端分离的原则,不管是ng 或者是vue 在开发中都无法避免跨域的这个问题 本人刚上手第一个vue项目,在调用api的时候出现了跨域的这个问题 这是封装好一个简单的post 请求 ...
- 学无止境,学习AJAX,跨域(三)
学习AJAX其实有个很重要的应用,就是为了执行另外几个站点的ASP,返回结果. 真正用起来,发现2个问题,>_> 不许笑,一向做DELPHI,接触ASP不多的我,的确问题大堆. 第一个问题 ...
- vue踩坑(二):跨域以及携带cookie
最近后台需求要在请求的时候传cooki给后台,正常情况下拿到cookie后存在cookie里,同域名下是会自己带到请求头里的,但是因为要在本地调试,那么问题就来了,localhost:8080下面的c ...
- 跨域学习笔记2--WebApi 跨域问题解决方案:CORS
自己并不懂,在此先记录下来,留待以后学习... 正文 前言:上篇总结了下WebApi的接口测试工具的使用,这篇接着来看看WebAPI的另一个常见问题:跨域问题.本篇主要从实例的角度分享下CORS解决跨 ...
- 详解Vue 开发模式下跨域问题
vue项目中,前端与后台进行数据请求或者提交的时候,如果后台没有设置跨域,前端本地调试代码的时候就会报“No 'Access-Control-Allow-Origin' header is prese ...
- vue 使用 proxyTable 解决跨域问题
1.在 main.js 中,在引入 axios: import axios from 'axios' Vue.config.productionTip = false Vue.prototype.$a ...
- Vue.js 2.0 跨域请求数据
Vuejs由1.0更新到了2.0版本.HTTP请求官方也从推荐使用Vue-Resoure变为了 axios .接下来我们来简单地用axios进行一下异步请求.(阅读本文作者默认读者具有使用npm命令的 ...
随机推荐
- K2 BPM_规范内部供应链流程,提高企业整体绩效_工作流流程管理
方案背景 随着企业竞争的加剧.顾客需求的多样化以及市场变化的不确定因素增多,企业与企业间的竞争已经逐步转变为供应链与供应链间的竞争.企业只有在内部各业务流程有机统一的状态下,再与外部企业进行融合与协作 ...
- 六、select查询基础篇
前言: DQL(Data QueryLanguage):数据查询语言,通俗点讲就是从数据库获取数据的,按照DQL的语法给数据库发送一条指令,数据库将按需求返回数据. 一.基本语法 select 查询的 ...
- Elasticsearch 入门,基本概念和操作
基本概念 Node 与 Cluster Elastic 本质上是一个分布式数据库,允许多台服务器协同工作,每台服务器可以运行多个 Elastic 实例. 单个 Elastic 实例称为一个节点(nod ...
- 记录java+testng运行selenium(三)---xml、ini、excel、日志等配置
一: ini文件 ini目前只用处存储浏览类型及需要打开的url,ini文件放在configs文件夹下面. 读取ini代码如下: package toolskit.documents; import ...
- LTS秘钥协商算法分析
1.根据RCF文档说法 在1-RTT中有两种密钥协商算法(1-RTT ECDHE和 1-RTT PSK )和4中0-RTT密钥协商方式(0-RTT PSK, 0-RTT ECDH ,0-RTT EC ...
- HTML主体标签
HTML标签 在HTML结构代码中可以看到非常多的<>,这就是html的标签.整块html代码几乎就是由各种各样的标签与标签内容构成,每一个标签对应一个网页上的一个小模块,如一段文字1,一 ...
- Innodb关键特性之自适用Hash索引
一.索引的资源消耗分析 1.索引三大特点 1.小:只在一个到多个列建立索引 2.有序:可以快速定位终点 3.有棵树:可以定位起点,树高一般小于等于3 2.索引的资源消耗点 1.树的高度,顺序访问索引的 ...
- oj.zstu 4421交税(合数分解成素数)
题目 题意:T组,每一组输入一个数X, 求X最少能分成几个素数的和,输出. 思路: 对于一个大于2的偶数,由哥德巴赫猜想,一定能分成2个素数. 对于一个奇数来说,一定能分成2个或者3个素数之和.如果 ...
- 关于Go Modules的一些内容
安装 配置环境 启用Go Modules go mod在Go >= 1.13才默认启用,在Go >= 1.11已经开始支持了go mod. 设置环境变量 # 启用go module exp ...
- Parameter 0 of method redisTemplate in org.springframework.boot.autoconfigure.data.redis.RedisAutoConfiguration required a bean of type 'org.springframework.data.redis.connection.RedisConnectionFactor
Error starting ApplicationContext. To display the conditions report re-run your application with 'de ...