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命令的 ...
随机推荐
- windows下oracle数据库报错ORA-12705解决方法
转自:http://blog.sina.com.cn/s/blog_16eaf6b940102x66q.html 有个朋友,他们那边windows虚拟机重启后,数据库不能起来报错ORA-12705无法 ...
- FreeRTOS 中断配置和临界段
中断屏蔽寄存器 PRIMASK.FAULTMASK和BASEPRI 1.PRIMASK:这是个只有1个位的寄存器.当它置1时, 就关掉所有可屏蔽的异常,只剩下 NMI和硬fault可以响应.它的缺省值 ...
- Django中使用JWT
JWT """ 1.组成: header.payload.signature 头.载荷.签名 2.距离: eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1 ...
- 每日一题-——LeetCode(46)全排列
题目描述: 给定一个没有重复数字的序列,返回其所有可能的全排列.输入: [1,2,3]输出:[ [1,2,3], [1,3,2], [2,1,3], [2,3,1], [3,1,2], [3,2,1] ...
- RT-Thread--线程间同步
线程间同步 一个线程从传感器中接收数据并且将数据写到共享内存中,同时另一个线程周期性的从共享内存中读取数据并发送去显示,下图描述了两个线程间的数据传递: 如果对共享内存的访问不是排他性的,那么各个线程 ...
- linux网络编程之socket编程(五)
今天继续学习socket网络编程,最近北京阴雨连绵,降温明显,感觉是要立马转入冬季的节奏,天冷晚上得注意多盖点被子哦,言归正传,进入正题: 对于之前写的回射客户/服务器端的程序中,我们是用的read和 ...
- node中的npm的使用
1.node中npm的使用 nodejs软件 1.安装nodejs 自带了npm npm install Bootstrap 好比python自带pip pip3 install requests ...
- idea远程debug调试阿里云ECS
1.首先远程服务器的代码跟本地项目代码应该完全一致,否则会出现debug混乱现象,亲测. 2.config如图: ①命名可以省略②复制这个地址③输入远程ip和自定义且未被占用的端口号xxxx 3.开放 ...
- framebufferfetch in mali multiple render targets mrt
gl_LastFragColorARM https://www.khronos.org/registry/OpenGL/extensions/ARM/ARM_shader_framebuffer_fe ...
- RocketMQ的技术亮点
高性能 存储原理 零拷贝 数据结构与存储逻辑 刷盘策略 长轮询PULL RocketMQ的Consumer都是从Broker拉消息来消费,但是为了能做到实时收消息,RocketMQ使用长轮询方式,可以 ...