刚入门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到内容的更多相关文章

  1. 本地Vue项目跨域请求本地Node.js服务器的配置方法

    前言:跨域请求是在本地开发时经常遇到的需求,也很简单,只是几句代码配置一下的问题.我初次配置跨域请求时由于官方的说明太简洁,找到的教程又落伍,调试了一番并没有解决问题,到最后解决问题,已花费了很多时间 ...

  2. vue 解决跨域问题

    1.后端处理允许跨域 2.反向代理跨域 代理服务器英文全称是Proxy Server,其功能就是代理网络用户去去的网络信息.形象的说:它是网络信息的中转站. vue中设置代理: 1.config/in ...

  3. vue解决跨域问题

    vue解决跨域问题 vue跨域解决方法和小总结 vue项目中,前端与后台进行数据请求或者提交的时候,如果后台没有设置跨域,前端本地调试代码的时候就会报“No 'Access-Control-Allow ...

  4. vue实现跨域请求的设置

    vue实现跨域请求,需要在vue.config.js里添加以下设置 proxy: { '/service/rest': { target: 'http://localhost:8080/autotab ...

  5. vue resource 携带cookie请求 vue cookie 跨域

    vue resource 携带cookie请求 vue cookie 跨域 1.依赖VueResource 确保已安装vue-resource到项目中,找到当前项目,命令行输入: npm instal ...

  6. VUE SpringCloud 跨域资源共享 CORS 详解

    VUE  SpringCloud 跨域资源共享 CORS 详解 作者:  张艳涛 日期: 2020年7月28日 本篇文章主要参考:阮一峰的网络日志 » 首页 » 档案 --跨域资源共享 CORS 详解 ...

  7. Vue的跨域设置

    1.在使用vue开发的时候经常要涉及到跨域的问题,其实在vue cli中是有我们设置跨域请求的文件的. 2.当跨域无法请求的时候我们可以修改工程下config文件夹下的index.js中的dev:{} ...

  8. vue + vue-resource 跨域访问

    使用vue + vue-resource进行数据提交,后台使用RESTful API的方式存取数据,搞了一天,终于把后台搞好了.进行联合调试时,数据不能提交,报403错误: XMLHttpReques ...

  9. 如何实现vue前端跨域,proxyTable解决开发环境前端跨域问题

    在开发环境与后端调试的时候难免会遇到跨域问题,很多人说跨域交给后端解决就好了. 其实不然,前端也有很多方法可以解决跨域,方便也快捷. 常见的有nginx转发.node代理. 在vue项目中常用的是pr ...

  10. vue axios跨域

    现在应用都是前后端分离,这也造成前端在调用接口时出现跨域问题,在控制台会这样提示 ,如果有类似于此图的提示,就已经表明你的接口调用出现了跨域问题,此文章是我对于vue跨域其中一种方式的一些经验,如果错 ...

随机推荐

  1. TFS2013 设置签出独占锁(转载)

    作者:晓菜鸟 出处:http://www.cnblogs.com/52XF/p/4239056.html 在使用TFS进行源代码管理的时候VS默认允许多个签出,但在团队开发中往往需要设置独占锁(排他锁 ...

  2. Thrift笔记(四)--Thrift client源码分析

    thrift文件 namespace java com.gxf.demo namespace py tutorial typedef i32 int // We can use typedef to ...

  3. 简单shell实现

    http://blog.csdn.net/lishuhuakai/article/details/11928055 #include <stdio.h> #include <unis ...

  4. vue+mock.js+element-ui模拟数据搞定分页

    效果如图: 前提是搭好vue前端框架,npm install mockjs引入mock.js 当前页全部代码如下,其他有关element-ui的引入未提到,仅作参考用 <!-- 用户管理 --& ...

  5. 工作流一期上线原创小故事——【加签】OR【不准】

    亲!您有过选择[加签]还是审核[不准]的烦恼吗? 加签分为:向前加签和向后加签,这个相信大家都很熟悉了吧. 审核分为:准和不准,就是√和×,这个相信大家也很熟悉了. 提示①:相邻的2个人审核时,如果意 ...

  6. C# winform 跨线程修改界面

    我们可以使用invoke和bengininvoke invoke同步执行一个委托 begininvoke异步执行一个委托

  7. MySQL几个join

    1.因为关系型数据库的基本原理,是基于“关系代数”.最重要的一类关系代数,就是2个集合之间的运算. 从集合运算的视角,去理解SQL中的几个常用join (1)inner join (2)left jo ...

  8. 源码安装mysql,及主从同步

    源码安装mysql [可选] 如果用源码安装cmake软件: cd /home/oldboy/tools/ tar xf cmake-.tar.gz cd cmake- ./configure #CM ...

  9. npm 安装axios和使用增删改查

    1:安装axios(建议安装淘宝镜像) npm install axios 2:项目导入 npm install --save axios vue-axios 3:页面导入 import axios ...

  10. Error: Error SSL Required Code: 403

    Error: Error SSL Required Code: 403 Error Message If the 'services' Web directory for ArcGIS is set ...