关于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跨域其中一种方式的一些经验,如果错 ...
随机推荐
- 了解WaitForSingleObject中WAIT_ABANDONED 返回值
1.互斥量内核对象 互斥量内核对象用来确保一个线程独占对一个资源的访问.互斥量对象包含一个使用计数.线程ID以及递归计数.互斥量与关键段的行为完全相同.但是互斥量是内核对象,而关键段是用户模式下的同步 ...
- CSP学习之ASN.1编码(一)
一.定义: 是定义抽象数据类型的标准. 是用于描述数据的表示.编码.传输.解码的灵活记法. 它提供一套正式.无歧义和精确的规则,以描述独立于特定计算机硬件的对象结构. 标准的ASN.1编码规则有其基本 ...
- javascript 权威指南
1.对象 1.1.序列话对象 JSON.stringify() 和 JSON.parse() 用来序列化和还原 javascript 对象. var o = {x:1, y:{z:[false,nul ...
- 19_AOP概述
[AOP的使用场景] 性能测试 访问控制 事务管理 日志记录 [AOP相关术语] [ 连接点 Joinpoint ] 程序执行的某个特定位置.(假如Car类有drive()方法,那么在drive()方 ...
- GIS中的坐标系定义与转换
GIS中的坐标系定义与转换 青岛海洋地质研究所 戴勤奋 2002-3-27 14:22:47 ----------------------------------------------------- ...
- c 结构体中的变长数组
在Linux系统里,/usr/include/linux/if_pppox.h里面有这样一个结构: struct pppoe_tag { __u16 tag_type; __u16 tag_len; ...
- 最新一道面試題目,input: int[1,1,2,2,2,3,3,3],output [3,2,1],要求按照數字出現的次數從多到少排列元素。
面試當時沒有及時答出來,感覺當時在面試官的提示下跑偏了.想用兩個數組來mapping key和value然後對等排序,但是因為面試官讓用Array.sort而沒想好有什麼好辦法,結果可想而知.但是題目 ...
- 爬虫入门之Requests模块学习(四)
1 Requests模块解析 Requests 唯一的一个非转基因的 Python HTTP 库,人类可以安全享用 Requests 继承了urllib2的所有特性.Requests支持HTTP连接保 ...
- day010-缓冲流、转换流、序列化流
1. 缓冲流 又称为高效流.高效流高效的原理:使用缓冲区(数组)临时存储多个数据,减少底层资源的调用次数.从而提高读写速度. 1.1 缓冲流分类 字节缓冲流: BufferedOutputSt ...
- Oracle 11.1.0.6 导入导出bug
实验环境: 11.1.0.6.0 对ANONYMOUSUSER_ALL表中分区进行备份 SQL> select TABLE_NAME,PARTITION_NAME,HIGH_VALUE,PA ...