关于Vue-cli 跨域,即使是非自己的服务器也可以get到内容
刚入门vue ,打算用vue的脚手架做一个小项目。需要用到第三方的api,无奈遇到各种各样的问题。
比如 Access-Control-Allow-Origin ,或者使用了ajax的jsonp模式之后也会出现个别api不兼容这个模式而出现另一个错误。还有的需要修改后端php之类的,头大。
后来又听说了proxyTable,需要修改config/Index.js里面的内容。 无奈创建的项目没有该文件(怪我官网的内容没看仔细,也没有好好看控制台vue的帮助指令)。今天无意中看到可以用vue init [project-name]的方式创建项目这样子就会有index.js文件了。
至此就可以使用该文件的proxyTable方法了。
第一步:设置mian.js 中axios的引入方式
import axios from 'axios'
Vue.prototype.$ajax = axios
网上的说法是$ajax相当于axios的别名,按我的理解命名成别得应该也可以吧。
第二步:以知乎的获取不知道是热门还是最新内容的api为例(网上例子里拿来的)
【https://news-at.zhihu.com/api/4/news/latest】首先在index.js文件内的正确位置添加
dev: {
//别的有了的内容可以不用管它,设置proxyTable就好了
proxyTable: {
'/news/latest': {
target: ' https://news-at.zhihu.com/api/4/',//接口域名+如果有端口 + 后续
changeOrigin: true,//是否跨域
// pathRewrite: {
// '^/news/latest': '/news/latest'//需要rewrite重写
// } //这个什么ppathRewrite没有搞明白.反正没设置这个能用我也没有管它了- -
}
},
修改config.js文件夹后, 通常需要重启一下这个服务才能生效(或许不是通常是必须)
第三步:最后就可以在你的vue文件下使用该api了
this.$ajax({
url: '/news/latest'', //这里就是上面target上面那个内容
//params: { type: 'hot'},
//这个params就是get参数的data,不过在这里不需要.给自己提个醒
method: 'get',
withCredentials: true
}).then(data=> {
console.log(data);
}).catch(error => {
console.log(error);
})
最后运行打开网站如果在Console里可以看到data就说明成功了。yeah 余汪汪万岁
做个笔记省的下次自己忘记了又要上网找的焦头烂额的,内容估计说的乱七八糟的。
不知道这样子做有没有什么安全隐患,我觉得应该会是有的吧
关于Vue-cli 跨域,即使是非自己的服务器也可以get到内容的更多相关文章
- 本地Vue项目跨域请求本地Node.js服务器的配置方法
前言:跨域请求是在本地开发时经常遇到的需求,也很简单,只是几句代码配置一下的问题.我初次配置跨域请求时由于官方的说明太简洁,找到的教程又落伍,调试了一番并没有解决问题,到最后解决问题,已花费了很多时间 ...
- vue 解决跨域问题
1.后端处理允许跨域 2.反向代理跨域 代理服务器英文全称是Proxy Server,其功能就是代理网络用户去去的网络信息.形象的说:它是网络信息的中转站. vue中设置代理: 1.config/in ...
- vue解决跨域问题
vue解决跨域问题 vue跨域解决方法和小总结 vue项目中,前端与后台进行数据请求或者提交的时候,如果后台没有设置跨域,前端本地调试代码的时候就会报“No 'Access-Control-Allow ...
- vue实现跨域请求的设置
vue实现跨域请求,需要在vue.config.js里添加以下设置 proxy: { '/service/rest': { target: 'http://localhost:8080/autotab ...
- vue resource 携带cookie请求 vue cookie 跨域
vue resource 携带cookie请求 vue cookie 跨域 1.依赖VueResource 确保已安装vue-resource到项目中,找到当前项目,命令行输入: npm instal ...
- VUE SpringCloud 跨域资源共享 CORS 详解
VUE SpringCloud 跨域资源共享 CORS 详解 作者: 张艳涛 日期: 2020年7月28日 本篇文章主要参考:阮一峰的网络日志 » 首页 » 档案 --跨域资源共享 CORS 详解 ...
- Vue的跨域设置
1.在使用vue开发的时候经常要涉及到跨域的问题,其实在vue cli中是有我们设置跨域请求的文件的. 2.当跨域无法请求的时候我们可以修改工程下config文件夹下的index.js中的dev:{} ...
- vue + vue-resource 跨域访问
使用vue + vue-resource进行数据提交,后台使用RESTful API的方式存取数据,搞了一天,终于把后台搞好了.进行联合调试时,数据不能提交,报403错误: XMLHttpReques ...
- 如何实现vue前端跨域,proxyTable解决开发环境前端跨域问题
在开发环境与后端调试的时候难免会遇到跨域问题,很多人说跨域交给后端解决就好了. 其实不然,前端也有很多方法可以解决跨域,方便也快捷. 常见的有nginx转发.node代理. 在vue项目中常用的是pr ...
- vue axios跨域
现在应用都是前后端分离,这也造成前端在调用接口时出现跨域问题,在控制台会这样提示 ,如果有类似于此图的提示,就已经表明你的接口调用出现了跨域问题,此文章是我对于vue跨域其中一种方式的一些经验,如果错 ...
随机推荐
- VMware装Linux系统全屏问题
在VMware上出装Linux,有强迫症的患者总是无法接受它不能全屏的问题,当然网上也有该问题的解决方案,但是搜索出来的答案总是零零散散,让很多初学者望而却步!今天笔者根据自己的机遇总结一遍最完备的解 ...
- linq之Capacity(转载)
出处:博客园 作者:mumuliang 连接:http://www.cnblogs.com/mumuliang/p/3914425.html Capacity 在.NET中List的容量应该只是受到硬 ...
- C# 判断List集合中是否有重复的项
/*在.Net 3.5 以上*/ ).Count() >= ;
- python-requests 简单实现数据抓取
安装包: requests,lxmlrequest包用于进行数据抓取,lxml用来进行数据解析对于对网页内容的处理,由于html本身并非如数据库一样为结构化的查询所见即所得,所以需要对网页的内容进行分 ...
- XtraTabPage右键菜单(关闭当前页、关闭其它页、所有关闭的实现)
实现的需求: 用户习惯是一个不可忽略的东西,默认这版的dx的tab也木有右键操作,但用户习惯操作如浏览器都有右键关闭功能,故这里实现先dx的该功能 技术实现: (1)在winform的相应控件内,拖入 ...
- WinSock Socket 池
之前在WinSock2.0 API 中说到,像DisConnectEx 函数这样,它具有回收SOCKET的功能,而像AcceptEx这样的函数,它不会自己在内部创建新的SOCKET,需要外部传入SOC ...
- shell 复制/备份文件 脚本
#!/bin/sh # author hapday # -- echo "以时间日期为名称基准备份 war 包." date +%Y-%m-%d-%H-%M-%S cp artup ...
- 【linux学习笔记】began,每次玩这个都特别着迷
胡乱的安装,通过虚拟机,从DVD加载开始,当然网上有大段的装机教程,装了两个Linux发行版,一个是centos7,一个是ubuntu18.04. 分区那些事: 因为处于学习阶段,所以总是因为分区问题 ...
- js for in 遍历对象与数组
遍历对象 let obj = { q:'9', w:'5', e:'2', t:'7', c:'3' } //for in 遍历对象 key为对象的属性名称,遍历属性值时用[]操作符访问 //通过[] ...
- arcgis版接合图表5.2 免费软件,支持国家2000坐标系,ArcGIS10.0,ArcGIS10.1,ArcGIS10.2都可以使用
下载地址:http://files.cnblogs.com/gisoracle/jionmap52.rar 1. 国家2000,西安80,北京54.坐标系的接合图表生成.根据经纬度范围,坐标 ...