刚入门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. [LeetCode]20. Valid Parentheses有效的括号

    Given a string containing just the characters '(', ')', '{', '}', '[' and ']', determine if the inpu ...

  2. 针对 IE的 的优化

    针对 IE 的优化 有些时候,你需要对 IE 浏览器的 bug 定义一些特别的规则,这里有太多的 CSS 技巧(hacks),我只使用其中的两种方法,不 管微软在即将发布的 IE7 beta 版里是否 ...

  3. IT集中监控

    监控的从底层到上应该是: 一 数据采集层 二 数据处理层 三 数据展示层 监控需要和ITIL中定义的服务进行相当多的交互,例如监控会使用配置管理数据库CMDB来记录和读取数据,会将事件处理方式从知识库 ...

  4. bit byte 字 字节 关系 简列

    字 word 字节 byte 位 bit 字长是指字的长度 1字=2字节(1 word = 2 byte = 16bit) 1字节=8比特(1 byte = 8bit) 1比特=1位 一个字的字长为1 ...

  5. (一)selenium发展史(专治selenium小白)

    Jason Huggins在2004年发起了Selenium项目,当时身处ThoughtWorks的他,为了不想让自己的时间浪费在无聊的重复性工作中,幸运的是,所有被测试的浏览器都支持Javascri ...

  6. [原]C++ double 小数精度控制

    第一种方法:cout<<fixed<<setprecision(20)<<mydouble<<endl; #include <iostream&g ...

  7. (转)写的非常好的一篇HTTP协议详解

    原文地址:http://www.cnblogs.com/TankXiao/archive/2012/02/13/2342672.html#3931004(推荐看原文,因为原文文章末有更详细链接) 当今 ...

  8. 【[NOI2018]你的名字】

    题目 可能是一个乱搞做法,同时也跪求有人能帮我分析一下复杂度 还是先来看比较简单的\(68pts\),也就是\(l=1,r=|S|\)的情况 我们可以直接把\(S\)串和所有的\(T\)串一起建一个广 ...

  9. 【[SDOI2013]随机数生成器】

    题目 来画柿子吧 我们要求的是 \[f(x)\equiv t(mod\ \ p)\] 其中\(f(1)=x_0,f(x)=af(x-1)+b\) 我们来写几项柿子看看 \[f(1)=x_0\] \[f ...

  10. bzoj 2434 [Noi2011]阿狸的打字机——AC自动机

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=2434 dfs AC自动机,走过的点权值+1,回溯的时候权值-1:走到询问的 y 串的节点,看 ...